What is the WCAG Contrast Checker?
The WCAG Contrast Checker measures the contrast ratio between two colors — a foreground text color and a background — and tells you whether the pair meets the Web Content Accessibility Guidelines (WCAG) 2.2 success criteria. Low-contrast text is one of the most common accessibility barriers on the web, and getting it wrong locks out users with low vision, anyone reading on a glare-affected screen, and many older users with reduced contrast sensitivity.
What the levels mean
- AA Normal text (≥ 4.5:1) — the legal baseline for body text on most public websites. This is the bar you should always clear.
- AA Large text (≥ 3.0:1) — applies when text is at least 18pt regular or 14pt bold (roughly 24px / 18.66px bold in CSS).
- AAA Normal (≥ 7.0:1) and AAA Large (≥ 4.5:1) — enhanced contrast required for users with more pronounced vision loss; mandatory for some government sites.
- Non-text UI (≥ 3.0:1) — required for icons, form input borders, focus rings, and other meaningful graphical elements (WCAG 2.2 SC 1.4.11).
The math, briefly
Contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances
of the lighter and darker color. Luminance comes from the sRGB-linear conversion of each channel weighted by
0.2126·R + 0.7152·G + 0.0722·B — heavier on green because the human eye is most sensitive to it. This tool
implements that formula exactly as written in WCAG, so its numbers match official testing tools.
Tips
- Click Suggest accessible variations to get nearby alternative colors that pass AAA — handy when a brand color is too light to meet AA against white.
- Both inputs accept
#RGB,#RRGGBB,rgb(), andhsl()notations. - For body text, always aim for AA at a minimum. If your design supports it, AAA is worth the effort — your readers in bright sunlight will thank you.