• 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 

.room-card:focus { outline: 1px solid #e0e0e0; } /* visible but only about 1.3:1 against the white card */

Why it matters

A guest tabbing through room options can see something happen on focus but can't clearly tell which card is actually selected.

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

A thicker, darker outline against the white card reaches well past the 3:1 minimum required for focus indicators.

.room-card:focus { outline: 2px solid #1a1a1a; outline-offset: 2px; }

Outcome

A guest tabs between rooms and can clearly tell which one is currently focused before pressing Enter.

Who is affected

Keyboard users with low vision get a focus indicator too faint to reliably follow between room cards.

Learn more

Related scenarios