ACCESSIBILITY TOOL
Color Contrast Checker
Check whether your color combinations meet WCAG 2.1 accessibility guidelines. Build interfaces that work for everyone.
SELECT COLORS
CONTRAST RATIO
21.00:1
EXCELLENT — PASSES ALL LEVELS
AA Large Text (3:1)PASS
AA Normal Text (4.5:1)PASS
AAA Large Text (4.5:1)PASS
AAA Normal Text (7:1)PASS
LIVE PREVIEW
Sample heading text
This is how your normal body text will appear with the selected color combination. Make sure it's easy to read for all users.
Smaller text used for captions, footnotes, or secondary information.
WCAG 2.1 requirements
AA Normal Text
4.5:1Body text, captions, form labels
AA Large Text
3:1Headings 18pt+ or 14pt bold
AAA Normal Text
7:1Enhanced accessibility
AAA Large Text
4.5:1Enhanced for headings
FAQ
What is color contrast?
The difference in luminance between foreground and background. High contrast helps people with visual impairments, color blindness, or in poor lighting.
WCAG contrast requirements?
AA: 4.5:1 for normal text, 3:1 for large text. AAA: 7:1 for normal, 4.5:1 for large.
AA vs AAA?
AA is the standard most sites should meet. AAA is enhanced for users with severe visual impairments.
What counts as large text?
18pt+ regular or 14pt+ bold.
How is the ratio calculated?
(L1 + 0.05) / (L2 + 0.05) using relative luminance.
Does this help color blindness?
Contrast helps, but don't rely on color alone — use patterns or labels too.
Is WCAG legally required?
In many countries, yes. ADA (US), EN 301 549 (EU).
BOOK A CALL
Need help with accessible design?
We design and build accessible web applications that comply with WCAG and provide great UX for everyone.