Contrast Ratio Checker

Check WCAG AA and AAA color contrast ratios for web accessibility

The quick brown fox
Small text preview — 14px body copy for readability testing
--
Enter colors above to check contrast ratio
?
AA Normal
4.5:1 required
?
AA Large
3:1 required
?
AAA Normal
7:1 required
?
AAA Large
4.5:1 required
Common Color Combinations
Black on White White on Blue White on Green White on Red Amber combo Blue on Dark
How to Use the Contrast Ratio Checker
1
Pick your text color using the color picker or enter a HEX code
2
Pick your background color the same way
3
See the contrast ratio and WCAG AA/AAA pass/fail results update instantly
4
Check the live preview to see how the text looks at normal and large sizes
About This Contrast Ratio Checker

Color contrast is a critical accessibility requirement for websites. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to ensure text is readable by people with low vision or color blindness. Our tool calculates the contrast ratio between any two colors and checks them against WCAG 2.1 success criteria.

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text — a higher standard for enhanced accessibility. Most websites should aim for at least WCAG AA compliance.

Frequently Asked Questions
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt or 14pt bold). This is the minimum standard for most accessibility compliance requirements.
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. This is the enhanced accessibility standard. While not always required, it ensures the best readability for users with visual impairments.
WCAG 2.1 also requires a 3:1 contrast ratio for non-text UI components like icons, form borders, and focus indicators under Success Criterion 1.4.11 (Non-text Contrast). This applies to interactive and informational graphics.