Free Color Contrast Checker
Check your colors against WCAG AA & AAA contrast standards instantly. Enter foreground and background colors to see the contrast ratio and compliance results.
Contrast Ratio
12.6:1
AA Normal (≥4.5:1)
AA Large (≥3:1)
AAA Normal (≥7:1)
AAA Large (≥4.5:1)
Live Preview
The quick brown fox jumps over the lazy dog.
This is a large heading
Small secondary text — often used for captions
Features
- ✓ Instant WCAG AA/AAA compliance check
- ✓ AI-powered color recommendations
- ✓ Support HEX, RGB, and HSL formats
- ✓ Real-time text preview with buttons & links
- ✓ APCA next-gen contrast calculation
- ✓ 100% free — no sign-up required
FAQ
What is color contrast ratio?
Color contrast ratio measures the difference in brightness between two colours — typically text (foreground) and its background. A higher ratio means better readability. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure content is readable by people with visual impairments, including colour blindness and low vision.
What is the minimum contrast ratio for WCAG AA?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18px) and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA, the stricter standard, requires 7:1 for normal text and 4.5:1 for large text.
How do I check if my website colours are accessible?
Use our free Color Contrast Checker above! Enter your foreground and background colours, and you’ll instantly see the contrast ratio and whether it passes WCAG AA and AAA standards.
Is my colour data safe?
Absolutely. All calculations happen entirely in your browser using JavaScript. No colour data is ever sent to any server, uploaded, or stored.