Free Tool
Color Contrast Checker
Check contrast ratios between foreground and background colors. See WCAG 2.1 AA and AAA compliance for normal and large text instantly.
Color Contrast Checker
The quick brown fox
Normal text
Contrast ratio: 14.10:1
Contrast Ratio
14.10:1
WCAG AA
Normal text
WCAG AAA
Normal text
WCAG AA Large
Large text
WCAG AAA Large
Large text
Why contrast ratio matters
Sufficient color contrast ensures text remains readable for users with low vision or color blindness. WCAG 2.1 Level AA (the standard required by most accessibility laws) requires a 4.5:1 ratio for normal text and 3:1 for large text (18px+ or 14px+ bold).
How to use
- Pick your text color using the color picker or enter a hex value.
- Pick your background color the same way.
- Read the contrast ratio and WCAG pass/fail badges instantly.
- Use the presets for quick reference pairs.
- Click Copy CSS to grab the color pair as CSS properties.
All calculations happen in your browser — no color data is sent to any server.
Frequently Asked Questions
- What is WCAG AA vs AAA?
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA (the enhanced level) requires 7:1 and 4.5:1. Most accessibility standards and legal requirements reference AA.
- What counts as large text?
- WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger.