Color contrast checker (WCAG)
Check whether two colors meet WCAG AA and AAA contrast ratios — with a live preview, in your browser.
Runs 100% in your browserLarge text sample
Normal body text sample — the quick brown fox jumps over the lazy dog.
—
contrast ratio
How to check color contrast
- Pick two colors. Choose a text (foreground) color and a background color.
- Read the ratio. The contrast ratio and AA/AAA pass-fail update live.
- Adjust until it passes. Nudge lightness until you hit the level you need.
About color contrast and WCAG
Sufficient contrast between text and its background is one of the most impactful accessibility wins — it helps people with low vision, color-vision deficiency, and anyone reading on a glary screen. The Web Content Accessibility Guidelines define exact ratios for AA and AAA conformance. This checker computes the ratio the same way assistive-technology auditors do and previews real text so you can judge legibility, not just the number. Build a harmonious set of compliant colors with the palette generator.
Frequently asked questions
- WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) to meet level AA. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
- Text that is at least 24px (18pt) regular, or 18.66px (14pt) bold. Large text is easier to read, so it has a lower contrast requirement.
- It uses the WCAG relative-luminance formula: each color is converted to linear-light sRGB, weighted, and the ratio is (L_lighter + 0.05) / (L_darker + 0.05), giving a value from 1:1 to 21:1.
- Graphical objects and active UI components must meet 3:1 (WCAG 1.4.11). Use the large-text / 3:1 result as your guide for those.