Color Contrast Checker
Check color contrast ratios for accessibility compliance
Color Selection
Choose your foreground and background colors
Sample Text
This is how your text will appear with the selected colors.
Contrast Analysis
WCAG 2.1 compliance results
0.00:1
PoorWCAG 2.1 Compliance
AA Level (Normal Text)
Minimum 4.5:1
AA Level (Large Text)
Minimum 3:1
AAA Level (Normal Text)
Minimum 7:1
AAA Level (Large Text)
Minimum 4.5:1
Alternative Foreground Colors
Suggested colors that would work better with your background
#ffffff
1.0:1#e6e6e6
1.2:1#ffffff
1.0:1#cccccc
1.6:1#ffffff
1.0:1#b3b3b3
2.1:1WCAG Guidelines
AA Level: Minimum standard for most websites
AAA Level: Enhanced accessibility for sensitive content
Normal Text: Text smaller than 18pt or 14pt bold
Large Text: Text 18pt+ or 14pt+ bold
UI Components: Icons and graphics require 3:1 ratio
Contrast Ratio Guide
7:1+ (Excellent): AAA compliant, highly accessible
4.5:1+ (Good): AA compliant, good accessibility
3:1+ (Fair): AA large text compliant
<3:1 (Poor): Not accessible, needs improvement