Color Contrast Checker
Check the WCAG contrast ratio between two colors, with live AA and AAA pass/fail results.
How to Check Color Contrast
- Pick a text color and a background color.
- The contrast ratio and WCAG AA/AAA pass/fail badges update instantly.
- Use the preview box to see how the combination actually looks.
Frequently Asked Questions
How is the contrast ratio calculated?
It follows the official WCAG 2.x formula exactly: each color's relative luminance is calculated from its linearized sRGB channels, and the ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), producing a value from 1:1 (identical colors) up to 21:1 (pure black on pure white).
What's the difference between the AA and AAA thresholds?
WCAG AA is the standard accessibility requirement: at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is a stricter, enhanced level requiring at least 7:1 for normal text and 4.5:1 for large text.
Why can two colors that look fine to me still fail?
Human perception of contrast doesn't map linearly to WCAG's math, and many people underestimate how much luminance difference is actually needed for text to stay readable for users with low vision or color vision differences — which is exactly why an objective formula, not a visual guess, is used for accessibility compliance.
Are the colors I pick sent anywhere?
No — the entire calculation happens locally in your browser using JavaScript, so nothing is ever sent to a server.