Color Contrast Checker
Check a text and background color pair against the WCAG 2.1 contrast thresholds, with a nearest-passing suggestion.
Results are provided as is, for general information. Check anything important before relying on it. See the Terms of Use.
About this tool
Enter a text colour and a background colour in any CSS form and get the WCAG 2.1 contrast ratio (1:1 to 21:1), with a pass or fail for AA and AAA at normal and large text sizes and for non-text UI components. The ratio is computed from relative luminance the way the WCAG defines it, and rounded to two decimals before every threshold check — the same rounding WebAIM uses, so a displayed 4.50 passes AA. A semi-transparent text colour is composited over the background first; a semi-transparent background is scored as if solid white sits behind it. When the pair misses AA, the tool searches for the nearest colour that reaches 4.5:1 by moving lightness in OKLCH while keeping the hue, so the suggestion still looks like your colour. Everything runs in your browser.
How it works
Contrast = (L1 + 0.05) ÷ (L2 + 0.05), L1 = lighter colour L = 0.2126 R + 0.7152 G + 0.0722 B (linearised sRGB) WCAG AA: 4.5:1 body text, 3:1 large text and UI
WCAG defines contrast from relative luminance, a weighted sum of the linearised red, green and blue channels. Green counts most because the eye is most sensitive to it. The ratio runs from 1:1 (identical colours) to 21:1 (black on white).
| Question | Working | Answer |
|---|---|---|
| Black on white | (1 + 0.05) ÷ (0 + 0.05) | 21:1, passes AAA |
| #777777 on white | (1 + 0.05) ÷ (0.184 + 0.05) | 4.48:1, just fails AA for body text (needs 4.5:1) |
When to use it
Questions
What counts as 'large' text?
WCAG defines large text as at least 18.66px (14pt) bold, or at least 24px (18pt) regular. Large text only needs 3:1 for AA and 4.5:1 for AAA, versus 4.5:1 and 7:1 for normal text — which is why a colour can pass one row and fail the one above it.
Why does the tool round the ratio before deciding pass or fail?
The WCAG success criteria are written against a ratio 'of at least 4.5:1', and the widely-used checkers (WebAIM among them) compare the value after rounding to two decimal places. A raw ratio of 4.497 shows as 4.50 and is treated as a pass. This tool matches that behaviour so its verdicts line up with the checker your reviewer is likely using.
How is a semi-transparent colour handled?
A text colour with alpha below 1 is alpha-composited over the background colour before the ratio is computed — that is what a viewer actually sees. A background colour with alpha is trickier because the tool cannot know what is behind it on your page, so it assumes solid white (the common default) and shows a note. If your real page background is dark, test against that colour directly instead.
Is the suggested colour the only option?
No — it is one accessible choice that stays close to your original hue and lightness. It holds the hue fixed and moves lightness (and, if a vivid hue cannot reach the target, reduces chroma), so it reads as the same colour, just darker or lighter. You can always pick a different colour and re-check it; plenty of accessible pairs exist that this heuristic will not land on.
Does passing contrast mean the design is accessible?
It clears one specific barrier. Contrast does not cover colour used as the only way to convey meaning, focus indicators, text over a busy image, or hover states — each has its own WCAG criterion. Treat a green row here as 'this pair is legible', not 'this component is done'.