Contrast Checker
Pick a text color and a background color and see the exact WCAG contrast ratio, plus whether it passes AA or AAA.
Large text preview (18pt+)
Normal text preview, the size most body copy uses.
What the badges mean
WCAG 2.1 requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt+, or 14pt+ bold) to meet AA. AAA is stricter: 7:1 for normal text, 4.5:1 for large text.
How it works
The ratio is computed with the actual WCAG relative-luminance formula, not an
approximation. Each channel is divided by 255, then linearized to undo the sRGB gamma
curve: values at or below 0.03928 are divided by 12.92, everything else goes through
((c + 0.055) / 1.055)^2.4. The linear channels are then weighted 0.2126 red,
0.7152 green, and 0.0722 blue, mirroring how much each contributes to perceived brightness
(your eyes are far more sensitive to green than blue). The contrast ratio is
(lighter + 0.05) / (darker + 0.05), which lands between 1:1 for identical
colors and 21:1 for pure black on pure white. The badges just compare that number against
the WCAG cutoffs: 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal, and
4.5:1 for AAA large.
"Large text" has a precise definition people rarely quote: 18pt (about 24px) regular, or 14pt (about 18.7px) bold. That's why a 3.2:1 pairing can be perfectly legal for a headline and a failure for body copy. Also notice the formula is symmetric: swapping foreground and background never changes the ratio, so the swap button is for previewing, not for gaming the score. One honest limitation: the ratio only measures luminance difference. A red on green combination can clear 4.5:1 on paper and still be genuinely hard to read for someone with color vision deficiency, so treat a passing badge as necessary, not sufficient.
Both colors are crunched through those formulas right here in the page's JavaScript on every change. No color values are transmitted anywhere, and you can verify that in the DevTools Network tab while you drag the pickers around.
Common questions
What's the difference between AA and AAA?
AA is the baseline most sites target: 4.5:1 for normal text, 3:1 for large text (18pt+, or bold 14pt+). AAA is stricter, aimed at content for users with low vision: 7:1 normal, 4.5:1 large.
Does this check images or just flat colors?
Just two solid colors, text against a background. For text over a photo or gradient, check contrast against the darkest and lightest areas it could sit on.
Is this the same formula browsers and audits use?
Yes. It's the standard WCAG 2.1 relative luminance and contrast ratio formula, the same one used by Lighthouse and axe.
From the blog: WCAG Contrast Checking: A Practical Guide