- Success Criterion 1.4.11
- Conformance level AA
Checkbox or Radio Outline Too Faint When Unchecked
1.4.11 — Non-text Contrast
Scenario
Setting
A bank's mobile money-transfer screen
What’s wrong
Checkbox/radio outlines below 3:1 (unchecked state invisible).
Example
A bank's mobile money-transfer screen shows the problem clearly: checkbox/radio outlines below 3:1 (unchecked state invisible).
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. On a bank's mobile money-transfer screen, this barrier means they can't perceive part of the content because of how it's displayed.
How to test
Measure a checkbox/radio's unchecked-state outline against its background: it needs at least 3:1, or the control effectively becomes invisible.
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
Corrected, a bank's mobile money-transfer screen now lets a visitor see the control's boundary and current state, specifically for the “Checkbox or Radio Outline Too Faint When Unchecked” issue on a bank's mobile money-transfer 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
- 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
- Star Rating Icons Where Filled and Empty Look Too Similar