• 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

Here's what happens on a ride-hailing app's trip booking screen: control state variants (hover, checked, pressed) dropping below 3:1 even where the default state passes.

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics. Here, on a ride-hailing app's trip booking screen, the result is they can't read the text against its background.

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

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 ride-hailing app's trip booking screen 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

Related scenarios