Skip to content
Accessibility Scanner

How to fix

How to fix color contrast issues

Low-contrast text is the most common accessibility failure on the web. It shows up on more than four in five home pages. Here is what WCAG requires and how to fix it.

Find low-contrast text on your site, free scan.

What WCAG requires

WCAG 2.2 success criterion 1.4.3 Contrast (Minimum) sets the AA bar:

  • 4.5:1 for normal text against its background.
  • 3:1 for large text (≥ 24px, or ≥ 18.66px bold).
  • 3:1 for meaningful graphics and UI component boundaries (1.4.11).

The ratio compares the relative luminance of the text colour and the colour directly behind it.

How to find the failures

Run the free scan above, every element that fails contrast is outlined and reported with its measured ratio and the colours involved. Watch especially for: muted "secondary" text, placeholder text, link colours on coloured backgrounds, sale/notification badges, and disabled-looking buttons that are actually active.

How to fix it

  • Darken the text or lighten the background until it clears 4.5:1. A contrast checker tells you the exact ratio.
  • Don't rely on colour alone for links, keep underlines, or ensure a 3:1 difference plus a non-colour cue.
  • Fix it in CSS / your theme settings, not with an overlay widget, overlays can't reliably correct contrast and don't make you compliant.
  • Re-scan after changes to confirm the ratio now passes.

Frequently asked questions

What contrast ratio is required for accessibility?

4.5:1 for normal text and 3:1 for large text (WCAG 2.2 AA, criterion 1.4.3). AAA raises this to 7:1 and 4.5:1.

Why is color contrast so important?

Low contrast makes text hard or impossible to read for people with low vision, colour vision deficiencies, or anyone on a glary screen. It's also the most frequent WCAG failure online.

Does large text need less contrast?

Yes, large text (≥ 24px, or ≥ 18.66px bold) only needs 3:1 because larger letterforms remain legible at lower contrast.

Can an accessibility overlay fix contrast?

Not reliably. Overlays apply blunt filters and don't fix your actual styles. Correct the colours in your CSS or theme and re-test.

Related guides

See what's actually broken on your site

Real axe-core results, every element outlined. No email wall, no fake “compliant” badge.

Run a free scan

Last updated 2026-06-20.