Color Contrast Checker (WCAG)
Choose two colors — the contrast ratio is calculated automatically, and you'll see whether it meets the WCAG 2.1 requirements for readable text.
How to use the color contrast checker
- Choose a text color and background color using the color picker or by typing a hex code directly.
- The contrast ratio and which WCAG levels it passes are shown automatically.
- The preview at the bottom shows how the combination actually looks.
What do WCAG AA and AAA mean?
WCAG (Web Content Accessibility Guidelines) is the international standard for accessible web content. For normal body text, AA level requires a contrast ratio of at least 4.5:1, while AAA (stricter) requires at least 7:1. For large text (18pt+/24px+, or 14pt+/18.5px+ bold), the requirements are lower: 3:1 for AA and 4.5:1 for AAA.
The contrast ratio is calculated from the colors' relative luminance (brightness) using WCAG 2.1's official formula — the same method used in browser accessibility tools and automated auditing tools like Lighthouse.
Frequently asked questions
Which level should I aim for?
AA is the minimum requirement in most accessibility regulations (like WCAG 2.1 AA, often legally required for public websites). AAA is stricter and recommended where practical, especially for long stretches of text.
Why is the requirement lower for large text?
Large letters are easier to distinguish from the background even with lower contrast, since the shape and details of each letter are more clearly visible.
Are my color choices sent to a server?
No, all calculation happens locally in your own browser.