Color Contrast Checker
Check WCAG color contrast for accessibility
The quick brown fox jumps over the lazy dog
Small text preview — 14px regular
How to Use Color Contrast Checker
- 1
Enter the foreground (text) colour and the background colour as HEX codes.
- 2
The tool calculates the contrast ratio between the two colours.
- 3
Check whether the combination passes WCAG AA and AAA accessibility standards.
- 4
Adjust the colours until you reach the required contrast ratio.
About Color Contrast Checker
Check WCAG color contrast ratio between foreground and background colors. Get AA and AAA accessibility ratings. Free online tool.
Best Use Cases
- •Verify text meets WCAG AA contrast requirements
- •Test color pairs for AAA accessibility compliance
- •Audit existing site designs for readability issues
- •Choose accessible button and link colors
- •Validate brand colors against accessibility standards
Examples
Text readability
Check if white text on a blue background passes WCAG AA for body copy.
Button contrast
Test whether a green button with white label meets the 4.5:1 ratio.
Brand audit
Enter your brand colors to confirm they pass AAA for large headings.
Common Mistakes to Avoid
- !Testing large text ratios for small body text
- !Forgetting to check both light and dark modes
- !Using AA thresholds when AAA is required
Limitations
- –Only checks two solid colors at a time
- –Does not evaluate gradients or image backgrounds
- –Does not test color blindness simulations
Frequently Asked Questions
What is WCAG AA contrast ratio?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
What is WCAG AAA?
AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text - the highest accessibility standard.