icon-contrast
Mobile validation
Icons and images often act as controls, indicate the state of a control, or convey essential information, for example a search icon that labels a text field. When they convey meaning, users must be able to see them. Make sure the parts of the graphic needed to understand it have a contrast ratio of at least 3:1 against the colors next to them, so people can distinguish its shape and interpret its meaning. Fixing this issue usually requires a new image or icon color from the design team. Check the contrast in both light and dark mode, because a graphic that passes in one mode may fail in the other.
Note: Purely decorative graphics, and graphics next to text that conveys the same information, are not required to meet this ratio. For the contrast of text, see the related color-contrast validation.
Pass Patterns
Icon with enough contrast
A gray #949494 icon on a white #FFFFFF background has a contrast ratio of 3.03:1, just above the 3:1 minimum.
White icon on a colored button
A white #FFFFFF icon on a blue #0066CC button has a contrast ratio of 5.57:1.
Fail Patterns
Icon with low contrast
A light gray #C4C4C4 icon on a white #FFFFFF background has a contrast ratio of 1.74:1, below the 3:1 minimum.
Icon that fails in dark mode
A dark gray #333333 icon has a contrast ratio of 12.63:1 on a white background in light mode, but only 1.48:1 on a #121212 background in dark mode.
Try It Yourself
Using a contrast checker
- Take a screenshot of the screen.
- Use a color picker to sample the icon's color and get its hex code.
- Sample the adjacent background color and get its hex code.
- Enter both colors in a contrast checker.
- Repeat the check in dark mode.
Expected results: The contrast ratio is at least 3:1 in both light and dark mode.
Actual results: The contrast ratio is below 3:1 in at least one mode.
Using developer tools
- iOS: In Xcode, open Xcode > Open Developer Tool > Accessibility Inspector, then open Window > Show Color Contrast Calculator and sample the icon and background colors.
- Android: Go to the Running devices panel in Android Studio. Load the device screen and open the Layout Inspector. Find the attributes of the component that relate to the appropriate colors for the foreground (e.g.
textColor) and background (e.g.backgroundTint). Use these colors in the color contrast checker.
Expected results: The Color Contrast Calculator shows a ratio of at least 3:1.
Actual results: The ratio is below 3:1.
FAQ
How does this issue relate to 1.4.11 Non-text Contrast?
SC 1.4.11 requires the parts of graphics needed to understand the content, and the visual parts of controls, to have a contrast ratio of at least 3:1 against adjacent colors. This validation flags meaningful icons and graphics below that ratio, so the criterion is not met.
Why is this issue marked as Moderate?
Low contrast icons can be hard to perceive for people with low vision or color vision deficiencies. Text labels or other visual cues often still convey the meaning, so people can usually complete their tasks. When an icon is the only way to understand a status or activate a control, the impact is higher, so it is rated moderate.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.4.11 Non-text Contrast (AA) | The visual presentation of user interface components and graphical objects required to understand content has a contrast ratio of at least 3:1 against adjacent colors, except for inactive components, purely decorative elements, and elements with no visual boundary indicating state. |
| EN 301 549 | 11.1.4.11 Non-text Contrast | Same as the WCAG text. |