Contrast Checker
Check contrast and accessibility
Test the contrast ratio between any two colors against WCAG AA and AAA, fix failing combinations automatically, and see how your colors look with color vision deficiency.
Foreground & background
3.54:1
Contrast ratio
Quick fixes
Preview heading
The quick brown fox jumps over the lazy dog. Small body text must meet the same contrast rules to stay readable for everyone.
Large text (bold, 16px)
Color blindness simulator
FAQ
Contrast checker questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA raises that to 7:1 and 4.5:1 respectively.
What do the AA and AAA badges mean?
They show the highest WCAG level your text and background combination passes for normal and large text. The checker updates them in real time as you adjust colors.
What is the color blindness simulator for?
It shows how your colors appear to people with different types of color vision deficiency, so you can make sure no meaning depends on color alone.
Can the tool fix failing contrast automatically?
Yes. The suggestions adjust the lightness of the text or background until the combination meets the target ratio while staying as close to your original color as possible.
Start now
Your next palette is one image away
Pick colors, extract palettes and export code — free, private and instant.