Color Contrast Checker
Pick a foreground and background color to instantly see the WCAG contrast ratio and whether it passes AA and AAA accessibility standards for normal and large text.
How to Use the Color Contrast Checker
- Click the foreground color swatch and choose your text color.
- Click the background color swatch and choose your background color.
- Watch the live preview update instantly with your chosen colors.
- Check the contrast ratio and the AA / AAA pass-fail badges for normal and large text.
- Adjust either color until you get a passing badge for your target compliance level.
Why Use This Tool?
How is the contrast ratio calculated?
This tool implements the exact WCAG 2.1 formula. Each color's sRGB channels are converted to linear RGB (using the standard sRGB gamma curve), combined into a relative luminance value using the coefficients 0.2126R + 0.7152G + 0.0722B, and then the contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 the darker. This is the same math browsers and accessibility auditing tools use, so the ratio shown here matches what a formal accessibility audit would report.
What do AA and AAA mean?
AA and AAA are conformance levels defined by the Web Content Accessibility Guidelines. AA is the baseline most legal and organizational standards require: a minimum 4.5:1 ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA is a stricter, enhanced standard requiring 7:1 for normal text and 4.5:1 for large text, recommended for content aimed at users with low vision.
Why does contrast matter for design?
Low-contrast text is hard to read for users with visual impairments, in bright sunlight, or on low-quality screens — which in practice is a large share of any audience. Meeting WCAG contrast targets improves usability for everyone, reduces bounce rates, and is often a legal requirement for public-facing websites under accessibility laws in many countries.
Is this tool free and private to use?
Yes. The Color Contrast Checker runs 100% client-side in your browser — no colors or data are ever uploaded or logged. It's completely free for personal and commercial design work, with no signup required.