- Success Criterion 1.4.11
- Conformance level AA
Focus Indicator Present but Below the Contrast Minimum
1.4.11 — Non-text Contrast
Scenario
Setting
A hotel booking site's room-selection page
What’s wrong
Focus indicator below 3:1 against background (visible but insufficient).
Example
On a hotel booking site's room-selection page, a visitor hits this wall: focus indicator below 3:1 against background (visible but insufficient).
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. Here, on a hotel booking site's room-selection page, the result is they can't read the text against its background.
How to test
Tab to a control and measure the focus indicator's own color against the background: it must be visible AND meet 3:1, not merely present.
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
After the fix, the same visitor to a hotel booking site's room-selection page can now read the text clearly against its background.
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
- Icon-Only Button Glyph With Contrast Too Low to See
- Star Rating Icons Where Filled and Empty Look Too Similar