Use this tool to check the contrast ratio between foreground and background colors. Ensure your text is readable and accessible by following WCAG guidelines.
This is how your text will look with these colors.
Essential for accessible websites:
Contrast ratios range from 1:1 to 21:1. Higher is better.
Enhanced contrast for improved readability, especially for people with low vision
Standard level for normal text, required for most accessibility compliance
Minimum level for large text (18pt+) and graphic elements
Does not meet accessibility standards, avoid using for text content
Enhanced - Best for low vision users
Standard - Required for compliance
Minimum - Large text only
Uses luminance-based calculation for accurate measurement.
Based on human eye perception
1:1 (no contrast) to 21:1 (maximum)
Ensures readability across devices and lighting conditions.
Larger text needs less contrast.
4.5:1 for AA, 7:1 for AAA
3:1 for AA, 4.5:1 for AAA
Aim higher for better accessibility.
Begin strong, adjust as needed
Check during design phase
Aim higher than minimum requirements
Often fails requirements
Poor contrast despite looking different