- Success Criterion 1.4.11
- Conformance level AA
Error Icon or Asterisk With Contrast Too Low to See
1.4.11 — Non-text Contrast
Scenario
Setting
A language-learning app's lesson screen
What’s wrong
Error icons/asterisks that carry state <3:1.
Example
border: 1px solid #dcdcdc; /* icon outline, ~1.2:1 against white */Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
How to test
Measure error icons or asterisks that carry required-field/error state 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. border: 1px solid #767676; /* ~4.5:1 */ Icons, borders, and other non-text UI elements need at least 3:1 contrast to stay visible.
Outcome
On a language-learning app's lesson screen, this barrier is gone for low-vision and color-blind people who need to perceive controls and meaningful graphics — they no longer have to work around this.
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
- Icon-Only Button Glyph With Contrast Too Low to See