Color Contrast Checker – Free Online Tool
Check WCAG color contrast ratios for AA and AAA accessibility compliance.
Sample Text
The quick brown fox jumps over the lazy dog.
7.54:1
Contrast Ratio
AAA
Normal Text
AAA
Large Text
Pass
UI Components
Example
Input
Foreground: #333333, Background: #FFFFFF
Output
Contrast Ratio: 12.63:1. AA ✓ AAA ✓
Dark gray on white provides excellent contrast, passing both AA and AAA standards.
How to Use Color Contrast Checker
- 1
Enter Colors
Pick or paste foreground and background colors.
- 2
Check Ratio
The contrast ratio and WCAG pass/fail results appear instantly.
- 3
Adjust
Tweak colors until you achieve the desired accessibility level.
What is Color Contrast Checker?
The Color Contrast Checker calculates the luminance contrast ratio between foreground and background colors according to WCAG 2.1 guidelines. It shows pass/fail status for AA and AAA compliance levels for both normal and large text sizes.
Common Use Cases
- ✦Verifying design system colors meet accessibility standards
- ✦Testing button and link colors for readability
- ✦Auditing existing websites for WCAG compliance
Embed This Tool
Add this tool to your website or blog with a simple iframe embed.
<div style="max-width:480px"><iframe src="https://buildutilities.com/embed/color-contrast-checker?ref=embed" width="480" height="360" frameborder="0" style="border-radius:8px;border:1px solid #2a2e3a;width:100%"></iframe><p style="font:11px sans-serif;color:#888;margin:4px 0 0;text-align:right">Powered by <a href="https://buildutilities.com/color-contrast-checker?ref=embed" target="_blank" rel="noopener">BuildUtilities</a></p></div>
Share
Share a link to this tool. Results can be passed via URL parameters.
https://buildutilities.com/share/color-contrast-checkerFrequently Asked Questions
Also available as
More Design Tools
Tools for accessibility, color, and visual asset generation.