How to Check Color Contrast for Accessibility (WCAG)

By Daniel · Updated July 2026

Contrast is what makes text readable. Low-contrast text — light grey on white is the classic offender — looks elegant to a designer with a good monitor and is invisible to a lot of real users. Accessibility guidelines put an actual number on 'readable enough'.

What the ratios mean

WCAG measures contrast as a ratio from 1:1 (identical) to 21:1 (black on white). For normal text you want at least 4.5:1 to pass level AA; large or bold text can pass at 3:1. The stricter AAA level asks for 7:1. AA is the common legal and practical target.

How to check a pair

  1. Open the contrast checker.
  2. Enter your text colour and background colour.
  3. Read the ratio and whether it passes AA and AAA for normal and large text.

Fixing text that fails

If a pair fails, do not just nudge the colour slightly — darken the text (or lighten the background) until it clears 4.5:1. Grey body text is the most common failure; a surprisingly dark grey is needed on white to pass, which is why 'accessible' text often looks nearly black.

Contrast is about lightness, not hue. Two vivid colours of similar brightness — like red on green — can fail badly and are also hard for colour-blind users. Check the number, don't trust your eye.

Color Contrast Checker
Check any text/background pair against WCAG AA and AAA.
Open the tool →

Common questions

What contrast ratio do I need?

At least 4.5:1 for normal text (WCAG AA), or 3:1 for large or bold text. AAA asks for 7:1.

Why does my light-grey text fail?

Grey on white often falls below 4.5:1. It needs to be much darker than it looks to pass.

Does contrast depend on colour or brightness?

Mostly brightness. Two colours can clash yet still fail contrast if they are similarly light or dark.

Is the checker private?

Yes, it runs entirely in your browser.

Keep reading

How to Generate a Color Palette · How to Convert HEX to RGB · How to Create a CSS Gradient