Color Contrast Checker
Check WCAG accessibility compliance for color combinations. Tests AA and AAA standards for normal and large text.
Sample Text Preview
This is how your text will look on this background.
0.00:1
WCAG Compliance
AA Normal Text (4.5:1)✗ Fail
AA Large Text (3:1)✗ Fail
AAA Normal Text (7:1)✗ Fail
AAA Large Text (4.5:1)✗ Fail
How to Use
- 1
Select colors
Choose foreground (text) and background colors using the color pickers.
- 2
View preview
See a live preview of how the text looks on the background.
- 3
Check compliance
View the contrast ratio and WCAG AA/AAA compliance results for normal and large text.
- 4
Adjust as needed
Use the swap button to try different combinations and ensure accessibility compliance.
Color contrast is the difference in luminance between foreground and background colors. WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios to ensure text is readable for users with visual impairments.
- •Ensuring website accessibility compliance
- •Testing brand color combinations
- •Validating design system colors
- •Meeting legal accessibility requirements (ADA, Section 508)