Color Contrast Checker
Check WCAG color contrast ratio between foreground and background colors.
The Color Contrast Checker calculates the contrast ratio between two colors according to WCAG (Web Content Accessibility Guidelines) standards. Ensuring sufficient contrast between text and background colors is essential for making your website accessible to people with visual impairments.
WCAG defines two conformance levels: AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text and 4.5:1 for large text.
This tool calculates the exact contrast ratio, shows pass/fail results for each WCAG level, and provides a visual preview of your color combination so you can evaluate readability.
Everything runs in your browser. Your color data is never sent to any server.
WCAG defines two conformance levels: AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, while AAA requires 7:1 for normal text and 4.5:1 for large text.
This tool calculates the exact contrast ratio, shows pass/fail results for each WCAG level, and provides a visual preview of your color combination so you can evaluate readability.
Everything runs in your browser. Your color data is never sent to any server.
Checker
Results
How to Use
- Enter the foreground (text) color in HEX format
- Enter the background color in HEX format
- Click Calculate to check the contrast ratio
- Review the WCAG compliance results
FAQ
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is 18px and above, or 14px bold and above according to WCAG guidelines.
Is my data uploaded?
No. Everything runs in your browser. Your data never leaves your device.
Learn More
Guides that feature this tool
Part of These Collections
Curated tool sets for specific workflows
Thank you! Your report has been submitted.