Color Contrast Checker (WCAG)
Check the contrast ratio between two colors and verify WCAG AA and AAA compliance for text accessibility.
Last updated
| Level | Normal text | Large text |
|---|---|---|
| AA | PASS | PASS |
| AAA | PASS | PASS |
Large text preview (24px+)
Normal text preview. This is how body copy looks with your selected color combination. Readability matters for all users.
Small text preview (14px). Check that this line is easy to read without straining.
Color Contrast and WCAG Accessibility
Color contrast is a fundamental aspect of accessibility. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to ensure that text is readable by people with low vision or color deficiencies. A contrast ratio of at least 4.5:1 is required for WCAG AA compliance (normal text), and 7:1 for AAA (enhanced). Large text (18pt regular or 14pt bold and above) has a more relaxed threshold: 3:1 for AA and 4.5:1 for AAA.
The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance measures how bright a color appears, taking into account the human eye's sensitivity to different wavelengths (green appears much brighter than blue at the same intensity, for instance). The formula normalizes the luminance values and produces a ratio from 1:1 (identical colors) to 21:1 (pure black on pure white).
Checking contrast is not just a regulatory requirement; it is good design. High-contrast text is easier to read for everyone, not just users with visual impairments. It matters even more in print, where you cannot adjust brightness or zoom in the way you can on a screen. To see how your contrast choices translate to physical output, print our Text Clarity test page and evaluate readability at multiple font sizes.
Related content
Was this page helpful?
Contrast ratios are calculated per WCAG 2.1 guidelines. On-screen rendering may differ from printed output. See our methodology and full disclaimer.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
For WCAG AA compliance, normal text (under 18pt or under 14pt bold) requires a contrast ratio of at least 4.5:1. Large text (18pt+ regular or 14pt+ bold) requires at least 3:1. These are minimum thresholds, and higher ratios are always better for readability.
What is the difference between WCAG AA and AAA?
AA is the standard accessibility level required by most regulations and guidelines. AAA is an enhanced level with stricter contrast requirements (7:1 for normal text, 4.5:1 for large text). AAA is the goal for optimal accessibility but is not required by most legal frameworks.
Does this apply to print as well as web?
WCAG was designed for digital content, but the principles apply to print too. In print, you lack the user's ability to zoom or adjust settings, so high contrast is arguably even more important. Use this checker when designing printed materials to ensure readability.
Why does white text on a light background fail?
Light foreground on a light background produces a low contrast ratio because both colors have high relative luminance. The human eye cannot easily distinguish between two light colors, which is why WCAG requires a minimum luminance difference.