Non-text color contrast

App accessibility checks if non-text elements have sufficient color contrast for readability. Non-text elements like icons, buttons, and images must have sufficient color contrast against their backgrounds to be easily seen by all users. Your app should have a minimum contrast ratio of 3:1 to comply with accessibility. This is crucial because:

• Accessibility: Users with visual impairments, such as low vision or color blindness, rely on adequate contrast to navigate and interact with your app.
• Usability: Clear visual elements enhance the overall user experience and ensures inclusivity.

Success criteria

The rule checks if non-text elements have a minimum contrast ratio of 3:1 against adjacent colors. For Android, the applicable elements whose contrast is checked are:

• ImageView: Graphical objects used to display icons, images, or other visual information.
• ImageButton: Interactive buttons with icons or images that convey actions.

How to fix?

To prevent insufficient non-text color contrast violations:

• Identify affected elements:
  Review image and icon elements in your app, such as, ImageView, ImageButton or similar elements in your app and ensure they meet contrast requirements against their backgrounds.
• Adjust colors:
  Modify foreground (icon or image) or background colors to achieve at least a 3:1 contrast ratio.

Example

The following screenshot highlights an insufficient non-text color contrast violation in a mobile app:

Following are the violations in this example:

• Issue #7: A yellow icon (#FFD60A) on a slightly darker yellow background (#FFCB00) has a low contrast ratio of 1.08:1, which is below the required 3:1 contrast ratio. This low contrast makes the icon difficult to perceive for users with visual impairments.
• Issue #8: A white icon (#FFFFFF) on a light gray background (#FAFAFA) has a contrast ratio of 1.04:1, also failing to meet the minimum 3:1 contrast requirement. Users with low vision may struggle to see this icon clearly due to insufficient contrast.

To resolve these violation, you must:

• Adjust foreground color: Modify the icon colors within the button or image elements to darker shades (e.g., use a darker yellow or gray) to achieve better contrast against the background.
• Modify background color: Adjust the background colors, either by lightening or darkening, to ensure the existing icon colors meet the 3:1 contrast ratio.
• Add a contrasting outline: If color modification is not feasible, add a contrasting outline or border around the icons to enhance visibility.

Reference

• Learn more about Non-text color contrast WCAG 2.1 - 1.4.11 (Level AA) guideline.
• Learn more about Non-text color contrast WCAG 2.2 - 1.4.11 (Level AA) guideline.