- Success Criterion 1.4.11
- Conformance level AA
Icon-Only Button Glyph With Contrast Too Low to See
1.4.11 — Non-text Contrast
Scenario
Setting
A photo-sharing app's upload screen
What’s wrong
Icon-only buttons (hamburger, search, close ×) with glyph <3:1.
Example
Consider a photo-sharing app's upload screen: icon-only buttons (hamburger, search, close ×) with glyph <3:1.
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. On a photo-sharing app's upload screen specifically, they miss information conveyed only by color.
How to test
Measure icon-only button glyphs (hamburger, search, close ×) against their background: 3:1 minimum.
How to fix
The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.
Outcome
Fixed, a visitor to a photo-sharing app's upload screen can see the control's boundary and current state, specifically for the “Icon-Only Button Glyph With Contrast Too Low to See” issue on a photo-sharing app's upload screen.
Who is affected
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Focus Outline Removed With No Replacement Indicator
- Input Field Border With Contrast Too Low to See
- Checkbox or Radio Outline Too Faint When Unchecked
- Toggle Switch States Too Similar in Color to Tell Apart
- Focus Indicator Present but Below the Contrast Minimum
- Star Rating Icons Where Filled and Empty Look Too Similar