• Success Criterion 1.4.3
  • Conformance level AA

Hover or Focus State Text That Fails Contrast Rules

1.4.3 — Contrast (Minimum)

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

Hover/focus/active state text dropping below ratio (all states must pass).

Example 

.track:hover { color: #d1d5db; background: #374151; }
<!-- the hover state lightens the text but the ratio drops to roughly 2.1:1 against the dark row -->

Why it matters

A listener browsing a playlist loses the track title the moment they hover over it to make a selection.

How to test

Measure status/state text (badges, chips, tags) against their background in every visual state, not just default.

How to fix

Check every interactive state, not just the default: this hover pairing now holds roughly 12.6:1.

.track:hover { color: #f9fafb; background: #374151; }

Outcome

The listener reads a track's title clearly the moment they hover to pick the next song.

Who is affected

Low-vision users and screen-magnifier users, who rely on hover and focus states being at least as legible as the resting state.

Learn more

Related scenarios