Start scanning free

( Perceivable / WCAG 1.4.3 )

Text contrast fails after a hover, focus, or state change

This check maps to Contrast (Minimum). Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level AA WCAG 1.4.3 — Contrast (Minimum)

What’s wrong

Text meets contrast requirements in its default state, but a hover, focus, active, or disabled style drops the contrast ratio below 4.5:1 (or 3:1 for large text).

Why it matters

Standard contrast checks only look at the resting state. A button that looks fine until you hover it, then goes light gray, fails for low-vision users exactly when they’re interacting with it.

How to fix it

Check contrast for every visual state a text element can be in, not just its default appearance.

Before
.btn:hover { color: #b0b0b0; background: #ffffff; }
After
.btn:hover { color: #595959; background: #ffffff; }

Learn more