Contrast Ratio Checker
Check WCAG contrast ratios between text and background colors with instant AA and AAA badges, plus a live preview of your combination.
The Contrast Ratio Checker tells you whether your text is readable against its background, using the official WCAG formula. Enter a text color and a background color to get the exact contrast ratio, clear pass or fail badges for AA and AAA levels, and a live preview of the combination. It is the fastest way for designers and developers to keep websites accessible and compliant.
Sample heading text
The quick brown fox jumps over the lazy dog. 1234567890
How to use the Contrast Ratio Checker
- Pick your text color and background color with the color pickers, or type HEX codes directly into the text fields.
- Read the contrast ratio and the AA and AAA pass-fail badges, which update instantly as you change either color.
- Check the live preview sample to see how your combination looks, then adjust the colors until everything passes.
Contrast Ratio Checker — FAQs
What contrast ratio do I actually need?
For normal body text, WCAG 2.1 requires a ratio of at least 4.5 to 1 for AA compliance, the level most standards reference. Large text (18pt and up, or 14pt bold) needs only 3 to 1. AAA is stricter — 7 to 1 for normal text — and is best for critical content whenever you can achieve it.
How is the contrast ratio calculated?
The tool uses the official WCAG formula: it converts each color to relative luminance (how bright the human eye perceives it), then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The result ranges from 1 to 1 (identical colors) up to 21 to 1 (black on white), matching what accessibility auditors use.
My brand colors fail AA. What should I do?
Keep the brand hue but adjust lightness — darkening text or lightening the background usually fixes the ratio while staying on-brand. Use the failing color for large headings or decorative elements instead, and reserve high-contrast pairs for body text. Small tweaks of 10 to 15 percent lightness often take you from fail to pass.
Is the contrast checker private?
Yes. Both colors are processed locally in your browser with the standard WCAG formula, so nothing is uploaded or logged. There is no account and no tracking of the combinations you test — you can check client brand colors with complete confidence that they stay private.