color Tools
Color Contrast Checker
Check WCAG color contrast ratios for accessibility.
Runs 100% in your browser — your data never leaves this device
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is Color Contrast Checker?
Color contrast is crucial for accessibility. This tool calculates the contrast ratio between foreground and background colors and checks if they meet WCAG 2.1 guidelines for normal text, large text, and graphical elements.
How to Use Color Contrast Checker
1. Enter foreground (text) color
2. Enter background color
3. See the contrast ratio and WCAG compliance
4. Adjust colors until you meet the required level
Common Use Cases
- Ensuring website accessibility
- Meeting WCAG compliance requirements
- Designing readable interfaces
- Testing brand colors for accessibility
Frequently Asked Questions
What are the WCAG contrast requirements?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.