WCAG Color Contrast Checker
Check colour contrast ratios for WCAG AA and AAA compliance. Fix accessibility issues and generate accessible palettes instantly.
Sample Text
The quick brown fox jumps over the lazy dog. This preview shows how your text will look against the background color.
Small text: Make sure it's readable at all sizes.
Accessible Text Colors
These colors work well with your background color (#ffffff)
WCAG Guidelines
Level AA (Minimum)
- • Normal text: 4.5:1 contrast ratio
- • Large text: 3:1 contrast ratio
- • UI components: 3:1 contrast ratio
Level AAA (Enhanced)
- • Normal text: 7:1 contrast ratio
- • Large text: 4.5:1 contrast ratio
- • Best for maximum readability
Check Color Contrast for Web Accessibility
Use our free WCAG color contrast checker to test foreground and background color combinations against accessibility standards. Ensure your designs are readable, inclusive, and compliant with Web Content Accessibility Guidelines.
WCAG AA and AAA Standards
WCAG defines two conformance levels for colour contrast. Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, making it the baseline for most websites and applications. Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text, providing enhanced readability for users with low vision or color deficiencies.
Fix Contrast Issues Instantly
When your color pair fails a WCAG check, our auto-fix feature adjusts the text color to the nearest accessible shade that meets your target level. Choose between AA or AAA compliance with a single click, and the tool finds the closest matching color that passes the required contrast ratio.
Generate Accessible Color Palettes
Go beyond a single color pair with our full accessible palette generator. Enter any background color and receive a complete design system with primary, secondary, and accent colors that all meet WCAG contrast requirements. Copy the generated CSS variables directly into your project.
Why Color Contrast Matters
Sufficient color contrast is essential for readability across all devices, lighting conditions, and visual abilities. Approximately 1 in 12 men and 1 in 200 women experience some form of color vision deficiency, making proper contrast a critical part of inclusive design. Beyond usability, meeting WCAG contrast standards helps satisfy legal accessibility requirements such as the ADA, Section 508, and the European Accessibility Act.