Online Tool Store
Contrast Ratio Checker
Check the WCAG contrast ratio between a text color and background color, with live pass/fail results for AA and AAA, normal and large text. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
—
Large text sample (24px)
Normal text sample (16px) — the quick brown fox jumps over the lazy dog.
- AA — normal text (4.5:1)
- AA — large text (3:1)
- AAA — normal text (7:1)
- AAA — large text (4.5:1)
How it works
- Pick or type a text color and a background color.
- See the contrast ratio and a live preview of both sizes of text.
- Check which WCAG levels (AA/AAA, normal/large text) the pair passes.
The formula
WCAG defines contrast ratio using each color's relative luminance — a perceptually-weighted brightness value between 0 (black) and 1 (white):
L = 0.2126 × R + 0.7152 × G + 0.0722 × B (gamma-corrected)
Contrast ratio = (L₁ + 0.05) ÷ (L₂ + 0.05), where L₁ is the lighter color
The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, the maximum possible).
FAQ
What's the difference between the AA and AAA levels?
AA is the WCAG "minimum acceptable" level most accessibility audits and legal requirements are based on. AAA is a stricter, "enhanced" level — harder to meet but better for readers with low vision. Most sites should target AA at minimum.
What counts as "large text"?
WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) and bold. Large text gets a lower contrast requirement because bigger, bolder strokes are inherently easier to read at lower contrast.
Does this check work for anything other than plain text on a solid background?
It checks flat foreground-vs-background contrast, which is what WCAG 2.x defines. It doesn't account for text over an image, gradient, or busy background — those need a manual check since the contrast varies across the image.
Why is contrast checked using "relative luminance" instead of just comparing the colors directly?
Human eyes don't perceive red, green, and blue light as equally bright — WCAG's formula weights each channel (most heavily green, least blue) and gamma-corrects it to match how contrast is actually perceived, not just the raw RGB numbers.
How we compare
| Feature | Online Tool Store | WebAIM Contrast Checker | Chrome DevTools |
|---|---|---|---|
| All 4 WCAG checks (AA/AAA × normal/large) at once | ✓ | ✓ | One pair per inspected element |
| No browser dev tools needed | ✓ | ✓ | Requires an existing page/element |
| No ads | ✓ | ✓ | ✓ |
Great when you're still picking a palette — before there's a live page to inspect with dev tools at all.