Color Contrast Checker 2026 — Free WCAG Tool
Color contrast checker that calculates WCAG 2.1 contrast ratios and instantly shows AA and AAA compliance for normal and large text — free, no sign-up.
Contrast Results
How It Works
- Pick your foreground color — click the color swatch or type a hex code for the text color you want to evaluate.
- Pick your background color — click the swatch or type the hex code of the background behind that text.
- Read WCAG results instantly — the contrast ratio updates live, showing AA and AAA pass/fail badges for both normal and large text, plus a live preview.
The WCAG 2.1 color contrast checker calculates relative luminance for each color and computes the contrast ratio using the formula (L1 + 0.05) / (L2 + 0.05). A ratio of 4.5:1 or higher passes WCAG AA for normal text; 7:1 or higher passes AAA.
Understanding WCAG Color Contrast
Color contrast is one of the most important accessibility requirements for web design. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure that text is readable for users with low vision, color blindness, or other visual impairments. Use this color contrast checker to verify your designs before publishing.
WCAG 2.1 Contrast Ratio Requirements
WCAG 2.1 defines contrast requirements at two conformance levels. Level AA is the standard required by most accessibility laws worldwide — including the Americans with Disabilities Act (ADA), Section 508, and Europe's EN 301 549. Level AAA is stricter and is recommended for critical content like healthcare, legal, and government sites. For practical web development, targeting AA compliance is the widely accepted baseline. You can also use our HEX to RGB Converter to convert color formats before testing.
| Text Type | AA Minimum | AAA Minimum |
|---|---|---|
| Normal text (under 18pt or 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | — |
| Decorative text / logos | No requirement | No requirement |
How Relative Luminance Is Calculated
Relative luminance is the perceived brightness of a color on a linear scale from 0 (black) to 1 (white). Each sRGB channel (R, G, B) is first linearized by reversing gamma encoding, then combined using perceptual weights: red (21.26%), green (71.52%), and blue (7.22%). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. This formula is defined in WCAG 2.1 Success Criterion 1.4.3. Our tool also pairs well with the Color Palette Generator for building accessible palettes from scratch.
Comments