Contrast Checker
WCAG pass or fail, and the nearest colour that fixes it.
Check text and background colours against the WCAG AA and AAA contrast requirements, and get the closest passing colour without losing the hue you started with.
Common failures to try
Large heading, 30 pixels
Large text as WCAG defines it, 18pt and up
Normal body copy. This is the size most of a page is set in, and the size the 4.5 to 1 requirement is written for.
Small print, captions and footnotes, which need the same 4.5 to 1.
AA, normal text
Body copy, labels, anything under 18pt · needs 4.5:1
AA, large text
18pt and up, or 14pt bold and up · needs 3:1
AAA, normal text
The stricter level, rarely required · needs 7:1
AAA, large text
Large text at the stricter level · needs 4.5:1
The nearest colours that pass
Found by moving lightness only, holding hue and chroma, so the suggestion is still recognisably the colour you started with rather than a different one that happens to pass.
To reach 7:1
The ratio is computed on linear light, which is the whole point: doing it on raw channel values, as a surprising number of checkers do, overstates the contrast of mid-tones badly. Large text means 18pt or 14pt bold and above, not simply bigger than the body copy. And contrast is only one part of readability — a passing ratio in a hairline weight at 11 pixels is still hard to read, which no ratio will tell you.
How the Contrast Checker works
Reporting a failure is the easy half. The half that saves time is the nearest passing colour, found by moving lightness only and holding hue and chroma, so what comes back is still recognisably the colour you started with rather than a different one that happens to pass.
Also known as: wcag contrast checker · color contrast ratio calculator · accessibility contrast checker · text contrast checker · aa contrast checker
Frequently asked questions
What contrast ratio do I need?
4.5 to 1 for normal text and 3 to 1 for large text to reach WCAG level AA, which is what most accessibility requirements and procurement rules point at. Level AAA raises those to 7 to 1 and 4.5 to 1. Interface components such as form borders and icons need 3 to 1 under WCAG 2.1, which is the requirement most often missed because it is not about text at all.
What counts as large text?
18pt and above, or 14pt bold and above, which is roughly 24 pixels and 18.66 pixels at default browser settings. It is a fixed threshold, not simply anything bigger than the body copy: a 20 pixel heading is normal text as far as the requirement is concerned and needs the full 4.5 to 1.
How is the contrast ratio calculated?
From relative luminance: the lighter colour's luminance plus 0.05, divided by the darker's plus 0.05. Luminance is computed on linear light rather than on the raw channel values, which is where a surprising number of checkers go wrong, and doing it on raw values overstates the contrast of mid-tones badly. The scale runs from 1 to 1 for identical colours to 21 to 1 for black on white.
Why can nothing fix my contrast against a mid grey?
Because there may genuinely be no answer. Against a mid-tone background, darkening runs out of room before it reaches 7 to 1 and lightening does too, so no colour in sRGB satisfies it in either direction. That case is reported as having no solution rather than being given a colour that quietly fails, and the fix is to change the background.
Does passing the contrast check mean my text is readable?
No. Contrast is one part of readability and the only part a ratio can measure. Hairline weights, very small sizes, tight letter spacing and long unbroken lines all hurt legibility at any ratio, and a passing figure at 11 pixels in a thin weight is still hard to read. The check is a floor rather than a verdict.
Why does the suggested colour keep my hue?
Because the alternative is useless in practice. A brand colour that fails is still the brand colour, and returning a different hue that passes solves an accessibility problem by creating a design one. Moving lightness in OKLCH while holding hue and chroma gives the closest version that passes, and it is usually a small enough change to be acceptable.