Text Color Contrast (WCAG): How to Fix Insufficient Contrast

Your audit found text that doesn't stand out enough from its background — the light-grey-on-white that looks classy in a mockup and turns into a squint-fest on a real screen in real daylight. This is the axe-core color-contrast rule, mapped to WCAG 1.4.3 (Contrast Minimum, Level AA). Low-contrast text is the single most common accessibility failure on the web, and it costs you readers with low vision, anyone on a phone in sunlight, and the trust of everyone who finds your page hard to read.

What the check measures

Contrast is a ratio between the text colour and the colour directly behind it, from 1:1 (identical, invisible) to 21:1 (pure black on pure white). WCAG AA sets the bar at 4.5:1 for normal text and 3:1 for large text (roughly 18.66px bold or 24px regular and up). Miss the threshold by a hair and the audit flags it — the math doesn't care that it "looks fine on my monitor."

A real failing example and the fix

/* FAILS: #999 grey on white is only 2.85:1 */
.help-text {
  color: #999999;
  background: #ffffff;
}

/* FAILS: white on a pale brand blue, ~2.1:1 */
.btn {
  color: #ffffff;
  background: #7bb0e8;
}

/* FIXED: #595959 grey on white hits 7:1 */
.help-text {
  color: #595959;
  background: #ffffff;
}

/* FIXED: white on a deeper blue, ~4.6:1 */
.btn {
  color: #ffffff;
  background: #2f6fb3;
}

You don't have to abandon your palette — you usually just have to darken (or lighten) one of the two colours until the ratio clears the bar. A good contrast checker tells you the exact ratio as you nudge the hex.

Contrast ratios and what they clear

Notice #767676 is the razor's edge for normal text on white — that's the lightest grey you can get away with. Anything paler than that and you're screwed on AA.

Why it matters for accessibility and SEO

Roughly one in twelve men has some form of colour vision deficiency, and millions more have age-related low vision. For them, faint text isn't stylish minimalism — it's illegible. Meeting 4.5:1 is the difference between reading your page and giving up on it.

For SEO, contrast is a readability and engagement lever. Text people can't comfortably read gets less time-on-page and more bounces, and Google's own tooling surfaces contrast in Lighthouse. It won't tank your rankings by itself, but hard-to-read pages lose the engagement battle, and that battle feeds the algorithm.

How to detect it on your own site

1. axe DevTools — run a scan and filter for color-contrast; it lists each element with its measured ratio and the required threshold.
2. Lighthouse — "Background and foreground colors do not have a sufficient contrast ratio" appears in the Accessibility audit with the failing nodes.
3. WAVE — its Contrast tab lets you see and tweak failing pairs live.
4. Chrome DevTools colour picker — Inspect an element, click the color swatch in Styles, and the picker shows the contrast ratio plus AA/AAA checkmarks.
5. Standalone checker — drop both hex values into a contrast checker (WebAIM's is the standard) for the exact number.

How to fix it

1. Identify the failing text/background pair from the audit — it gives you both colours and the ratio.
2. Decide which colour to move. Usually you darken the text or deepen the background rather than touch brand colours you can't change.
3. Adjust the hex until a checker shows at least 4.5:1 (normal) or 3:1 (large text 18.66px bold / 24px regular).
4. Watch out for text over images or gradients — test against the lightest and darkest spots the text sits on, and add a scrim if needed.
5. Update the token or CSS variable, not one-off overrides, so the fix holds everywhere.
6. Re-run axe to confirm every color-contrast violation clears.

FAQ

Does this apply to disabled buttons and placeholder text?

Disabled controls are exempt from 1.4.3, so axe skips them. Placeholder text is not exempt — if you rely on it (you shouldn't, per the labels check), it still needs to meet contrast.

What counts as "large text"?

18.66px (14pt) bold or larger, or 24px (18pt) regular or larger. Large text only needs 3:1 because bigger glyphs are easier to resolve at lower contrast.

My white text on a photo fails — how do I fix it without changing the design?

Add a semi-transparent dark overlay (a scrim) between the image and the text, or a text-shadow. That lifts the effective background contrast without touching your type colour.

Is AAA (7:1) required?

No. The audit targets AA (4.5:1). AAA is a stretch goal for body text and worth it for dense reading, but you won't fail this check for merely hitting AA.

Does dark mode change anything?

Yes — dark mode is a separate colour pair and needs its own contrast check. Light-grey text that passes on white can fail on a dark-grey background. Test both themes.

Related checks

See the closely related all text elements must have sufficient contrast colors. Contrast sits alongside the naming checks in the same audit family: links must have discernible text, buttons must have discernible text, and the broader accessibility and SEO overview.