Failed a Contrast Check? Here's How to Fix It
A "fail" result means your color pair falls below the WCAG ratio required for its use — 4.5:1 for normal text, 3:1 for large text, at the AA level most sites target. Below are the four fixes that resolve the vast majority of failed pairs, roughly in order of how often each one applies.
1Darken the text, or lighten the background
The most common failure is a mid-tone gray on white — a popular choice for "secondary" or "muted" text because it looks subtle, but it often lands well under 4.5:1. The fix is usually a small nudge: you rarely need to go all the way to black.
2Qualify for the "large text" threshold instead
WCAG defines "large text" as 18pt (24px) regular weight or 14pt (~18.5px) bold — and large text only needs 3:1, not 4.5:1. If a heading or button label is close to passing and you have room to size it up, bumping it past the large-text threshold can turn a fail into a pass without touching the color at all. This doesn't help body copy, but it's a quick fix for headings, labels, and stat callouts.
3Give text its own solid background
This applies when text sits on a photo, gradient, or busy image where you can't control the underlying color. Rather than fighting for contrast against unpredictable pixels, place the text on a solid or semi-transparent panel (a dark overlay strip, a solid badge/chip background) so the contrast calculation only has to account for one fixed, known background color.
4For status indicators, add a second signal
Saturated red/green pairs (common for error/success states) frequently fail contrast against each other or against white — and even when they technically pass, they're still unreadable for colorblind users. Rather than only chasing a passing ratio, pair the color with an icon, label, or underline so the meaning doesn't depend on color perception at all. This satisfies WCAG's separate "use of color" success criterion in addition to the ratio requirement.
5Verify the fix
After adjusting a color, run the new pair back through our Contrast Checker to confirm it clears 4.5:1 (or 3:1 for large text) before shipping it — small hex changes can move the ratio less than you'd expect, so it's worth double-checking rather than eyeballing the result.
Test your fix before you ship it.
Check any two colors against WCAG AA and AAA thresholds instantly, right in your browser.