Color Contrast Checker
Check if your color combinations meet WCAG accessibility guidelines. Test foreground and background colors to ensure your text is readable for all users, including those with visual impairments.
Large Text Sample
This is normal text. The quick brown fox jumps over the lazy dog.
Small text sample for detailed readability check.
Contrast Ratio
17.4:1
Normal Text
AA: 4.5:1 | AAA: 7:1
Large Text
AA: 3:1 | AAA: 4.5:1
UI Components
Minimum: 3:1
Pass Status
FAQ
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA level requires 4.5:1 for normal text and 3:1 for large text. AAA level requires 7:1 for normal text and 4.5:1 for large text.
What contrast ratio should I aim for?
For most websites, meeting WCAG AA standards (4.5:1 for body text) is the minimum recommendation. For better accessibility, aim for AAA compliance (7:1) when possible.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of two colors. The formula produces a ratio from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).