Swatch
Free tool
// free accessibility tool
WCAG Contrast Checker
Test the color contrast ratio of any two colors and see instantly whether they pass WCAG AA and AAA — for normal and large text. Free, no signup, runs entirely in your browser.
What is a contrast ratio?
A contrast ratio measures how different two colors are in luminance — how much the text color «stands out» against its background. It ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) define minimum ratios so text stays readable for people with low vision or color-vision deficiency — roughly 1 in 12 men and 1 in 200 women.
This checker implements the exact WCAG 2.x formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color.
WCAG contrast requirements — AA vs AAA
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text (under 24px) | 4.5:1 | 7:1 |
| Large text (≥ 24px, or ≥ 18.66px bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
AA is the compliance level most products and regulations target (ADA, EN 301 549, EAA). AAA is the enhanced level — aim for it in body text and long-form reading.
FAQ
What contrast ratio does WCAG require?
Level AA: at least 4.5:1 for normal text and 3:1 for large text. Level AAA: 7:1 for normal text and 4.5:1 for large text. Non-text UI elements and meaningful graphics need at least 3:1.
What is the difference between WCAG AA and AAA?
AA is the standard target for legal compliance; AAA is the stricter, enhanced level for maximum readability. If your audience reads a lot of text or includes users with low vision, aim for AAA on body copy.
What counts as large text?
At least 24px (18pt) at regular weight, or at least 18.66px (14pt) at bold weight. Large text only needs 3:1 for AA and 4.5:1 for AAA.
How is the contrast ratio calculated?
Each color is converted to relative luminance (a weighted, gamma-corrected mix of its R, G and B channels), then the lighter and darker values are compared as (L1 + 0.05) / (L2 + 0.05).
Can I check contrast while picking colors from a web page?
Yes — the Swatch Chrome extension shows a live WCAG grade the moment you pick a color with its eyedropper, without switching to a separate tool.
Check contrast while you pick the color
Swatch — a clean color picker & eyedropper for Chrome — grades WCAG contrast live as you pick. No ads, no tracking.