Color Contrast Checker (WCAG)
Check if a text/background color pair passes WCAG accessibility contrast rules.
What is the Color Contrast Checker?
This tool calculates the contrast ratio between a text color and a background color, and checks that ratio against the Web Content Accessibility Guidelines (WCAG) 2.x thresholds — the standard used to judge whether text is readable enough for people with low vision or color-vision deficiencies.
How to use it
- Enter or pick your text color and background color.
- Check the live preview and the pass/fail results for each WCAG level.
What the levels mean
WCAG defines contrast ratios on a scale from 1:1 (identical colors) to 21:1 (black on white). Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold); level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. These thresholds come directly from the published WCAG 2.x success criteria (1.4.3 and 1.4.6), which most accessibility audits and legal accessibility requirements are built around. The contrast ratio itself is computed from each color's relative luminance using the formula defined in the WCAG specification, the same math used by browser developer tools' own contrast checkers.
Want the "why" behind this tool? Read Why WCAG Contrast Ratios Aren't Just About Brightness.