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.

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.