• Success Criterion 1.4.11
  • Conformance level AA

Hover or Pressed State That Drops Below Contrast Minimum

1.4.11 — Non-text Contrast

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

Control state variants (hover, checked, pressed) dropping below 3:1 even where the default state passes.

Example 

.confirm-ride { background: #1565c0; color: #fff; } /* passes at rest */
.confirm-ride:active { background: #a8c6e8; } /* pressed state drops to about 1.8:1 against white text */

Why it matters

A rider pressing 'Confirm Ride' briefly sees the button nearly vanish against its own white label during the tap.

How to test

Measure every interactive state (hover, checked, pressed) separately with a contrast checker: a state passing in default but dropping below 3:1 when hovered/checked/pressed fails.

How to fix

Check every interactive state, not just the default, against its adjacent colors; a passing rest state can still fail on press.

.confirm-ride:active { background: #0d47a1; }

Outcome

A rider taps Confirm Ride and sees clear visual feedback that the button responded.

Who is affected

Low-vision riders lose visual confirmation that their tap registered, right at the moment they need feedback most.

Learn more

Related scenarios