Color Contrast Checker
Check WCAG accessibility compliance for your color combinations.
Ad
Normal text looks like this (18px)
Large text looks like this (24px bold)
21:1
Contrast Ratio
AA
Normal Text (4.5:1)
PASS
AA
Large Text (3:1)
PASS
AAA
Normal Text (7:1)
PASS
AAA
Large Text (4.5:1)
PASS
Suggested Accessible Alternatives
Ad
Frequently Asked Questions
What is WCAG contrast ratio? +
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
What is the difference between AA and AAA compliance? +
AA is the minimum recommended level requiring 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA compliance.
What counts as large text in WCAG? +
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold text. Large text has lower contrast requirements because larger characters are easier to read.
How is the contrast ratio calculated? +
The contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.
Why is color contrast important for accessibility? +
Sufficient color contrast ensures that text is readable by people with low vision, color blindness, or those viewing screens in bright sunlight. Poor contrast makes content difficult or impossible to read for millions of users.
Ad