• Success Criterion 1.4.1
  • Conformance level A

Link Color That Only Changes on Mouse Hover

1.4.1 — Use of Color

Scenario

Setting

A public library's catalog search

What’s wrong

Link color hover-only differentiation (relies on pointer interaction — keyboard/color-blind users get nothing).

Example 

a.result-link { color: #111827; text-decoration: none; }
a.result-link:hover { color: #1d4ed8; text-decoration: underline; }
<!-- links look identical to plain text until a mouse hovers over them -->

Why it matters

A patron browsing search results with a keyboard or touchscreen never triggers the hover state, so links never look clickable.

How to test

Check link styling without hovering: if links look identical to body text until you hover over them, keyboard and touch users get no visual cue at all — it fails.

How to fix

Give links a visible default state (underline plus color); reserve hover for an additional, not the only, cue.

a.result-link { color: #1d4ed8; text-decoration: underline; }
a.result-link:hover { color: #1e40af; }

Outcome

A patron using only the keyboard sees which catalog entries are links before ever pressing Tab.

Who is affected

Keyboard-only and touchscreen users who can't trigger :hover, plus colorblind users who miss the hover color shift.

Learn more

Related scenarios