Contrast Checker
Use this tool to check the contrast ratio between foreground and background colors. Ensure your text is readable and accessible by following WCAG guidelines.
Preview
Sample Text
This is how your text will look with these colors.
Contrast Examples
About Contrast Checking
Essential for accessible websites:
- Ensures readability for all users
- Meets WCAG guidelines
- Works across devices and lighting
WCAG Guidelines
Contrast ratios range from 1:1 to 21:1. Higher is better.
AAA Level (7:1 ratio)
Enhanced contrast for improved readability, especially for people with low vision
AA Level (4.5:1 ratio)
Standard level for normal text, required for most accessibility compliance
A Level (3:1 ratio)
Minimum level for large text (18pt+) and graphic elements
Fail (Below 3:1)
Does not meet accessibility standards, avoid using for text content
WCAG Compliance Levels
Enhanced - Best for low vision users
Standard - Required for compliance
Minimum - Large text only
Luminance Calculation
c = c / 12.92
else
c = ((c + 0.055) / 1.055)²⁴
How It Works
Uses luminance-based calculation for accurate measurement.
Luminance Measurement
Based on human eye perception
Scale Range
1:1 (no contrast) to 21:1 (maximum)
Why It Matters:
Ensures readability across devices and lighting conditions.
Text Size Requirements
Larger text needs less contrast.
Normal Text
4.5:1 for AA, 7:1 for AAA
Large Text (18pt+)
3:1 for AA, 4.5:1 for AAA
Pro Tip:
Aim higher for better accessibility.
Text Size Examples
Best Practices
Start with High Contrast
Begin strong, adjust as needed
Test Early
Check during design phase
Think Beyond Compliance
Aim higher than minimum requirements
Common Mistakes
Gray Text on White
Often fails requirements
Similar Colors
Poor contrast despite looking different
Common Mistakes
⚠️ Warning Signs:
- • Squinting to read text
- • Difficulty in bright light
- • Text disappears when printed
- • Hard to read on mobile