Color Contrast Checker — WCAG AA & AAA
Check whether text and background colours are readable enough — the exact WCAG ratio, the AA/AAA verdicts, and how to fix a failure.
—
What this tool does
It measures the contrast between a text colour and a background colour and tells you whether it meets the WCAG accessibility standard. Contrast is the single most important factor in whether text is readable: low-contrast grey-on-white looks tasteful on a designer's monitor and is unreadable to someone in sunlight, on a cheap screen, or with reduced vision. The ratio turns that judgement into a number.
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
"Large text" is about 18pt (24px) or 14pt (18.66px) bold. AA is the level most regulations and policies require; AAA is the stricter target for text where legibility matters most.
Contrast comes from brightness, not colour
Two colours look different when their relative luminance differs — green and red look vivid together but can have almost the same brightness, so text in one on the other is hard to read. That is why the ratio is computed from luminance and not from how different the hues look: the fix for a failing pair is nearly always to change the lightness, not the hue.
Where it matters
Everywhere text meets a background — buttons, form labels, placeholders, chart legends, the text on a coloured banner. It is also a legal requirement in many places (WCAG AA is referenced by accessibility law), and it is one of the cheapest quality wins on any site: a minute with this tool can make a page readable for people the designer never pictured.
Frequently asked questions
What is contrast ratio?
A number from 1 to 21 that measures how different two colours are in brightness — specifically, how readable text in one colour is on the other. The formula is defined by WCAG, the web accessibility standard: 1 means identical (invisible) and 21 means black on white.
What do the AA and AAA labels mean?
WCAG sets minimum ratios. For normal text, AA requires 4.5 and AAA requires 7; for large text (about 18pt or 14pt bold), AA requires 3 and AAA 4.5. A page that fails AA is genuinely hard for some people to read, not just theoretically non-compliant.
What is the difference between AA and AAA for large text?
Large text is easier to read at a lower contrast, so the standard relaxes the requirement — AA large is 3, AAA large is 4.5. This tool shows both the normal-text and large-text results so you can see which bar your colours clear.
My colours fail — how do I fix them?
Usually by moving the lighter colour toward white or the darker one toward black: contrast comes almost entirely from the brightness difference, so darkening a dark colour or lightening a light one helps more than changing the hue. The tool shows how much you would need for the next level.
Does a passing ratio guarantee good design?
No — it guarantees legibility, not taste. Two colours can pass at 4.6 and still look muddy together. Use the ratio as the floor a combination must clear, then judge the palette on its own terms.
Is anything uploaded?
No. The calculation is pure arithmetic in your browser; the colours never leave the page.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- WCAG 2.2 — Contrast (Minimum) 1.4.3 and Contrast (Enhanced) 1.4.6 (W3C).
Everything runs in your browser — nothing you type is uploaded.