Color Contrast Checker
Test color combinations for WCAG accessibility compliance. Instant results, completely private.
14.68:1
The quick brown fox jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Normal Text
Requires 4.5:1
AAA
Normal Text AAA
Requires 7:1
AAA
Large Text
Requires 3:1
AAA
UI Components
Requires 3:1
AA
White
Black
Gray 50
Gray 100
Gray 200
Gray 500
Gray 700
Gray 900
Red 500
Orange 500
Yellow 500
Green 500
Blue 500
Indigo 500
Purple 500
Pink 500
How to use
- Enter or pick a foreground (text) color.
- Enter or pick a background color.
- View the contrast ratio and WCAG compliance results instantly.
- Use the suggestion feature to find an accessible alternative if needed.
Examples
WCAG Requirements
Normal Text AA:
4.5:1 minimum contrast ratio
Normal Text AAA:
7:1 minimum contrast ratio
Large Text AA:
3:1 minimum contrast ratio
Large Text AAA:
4.5:1 minimum contrast ratio
Common Contrast Ratios
- 21:1 — Black (#000000) on White (#FFFFFF)
- 7.4:1 — Dark gray (#374151) on White
- 4.6:1 — Gray (#6b7280) on White
- 2.2:1 — Light gray (#9ca3af) on White (fails AA)