Preview Text
This is how your text will look with the selected colors.
Contrast Ratio
21.00:1
WCAG Score
AAA
Rating
Excellent
Understanding WCAG Contrast Requirements
Minimum contrast ratios for accessible design
Standard Compliance
- ✓4.5:1 for normal text (<18pt)
- ✓3:1 for large text (18pt+ or 14pt+ bold)
- ✓3:1 for UI components and graphics
Enhanced Compliance
- ✓7:1 for normal text
- ✓4.5:1 for large text
- ✓Best for users with severe visual impairments
Why Color Accessibility Matters
Designing for everyone
People globally have vision impairments (WHO)
Of men have some form of color blindness
ADA, EAA, and other laws require accessible design
Common Contrast Mistakes to Avoid
Learn from these frequent accessibility issues
Light Gray on White
Very common on placeholder text and disabled states. Most gray-on-white combinations fail WCAG.
Colored Text on Colored BG
Colorful designs often sacrifice readability. Always check contrast when using colored text.
Good: Dark Gray on White
Dark gray (#333 or darker) on white passes AAA for all text sizes.
Good: White on Dark
Dark mode designs benefit from sufficient contrast for comfortable reading.
Frequently Asked Questions
Common questions about contrast and accessibility
What is WCAG?
WCAG (Web Content Accessibility Guidelines) are international standards published by W3C that define how to make web content accessible to people with disabilities, including visual impairments.
Is WCAG AA enough or do I need AAA?
WCAG AA is the legal requirement in most jurisdictions (ADA, EAA). AAA is recommended for enhanced accessibility but not always achievable for all content. Aim for AA minimum, target AAA where possible.
Do logos need to meet contrast requirements?
No, logos and decorative images are exempt from WCAG contrast requirements. However, if your logo contains essential text, consider providing an accessible version for certain contexts.
What about color blindness?
Color contrast helps all users, including those with color blindness. However, also avoid using color alone to convey information. Use patterns, labels, or icons alongside colors.
Quick Reference Chart
At-a-glance contrast requirements
| Element Type | Level AA | Level AAA |
|---|---|---|
| Normal Text (<18pt / <14pt bold) | 4.5:1 | 7:1 |
| Large Text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI Components (buttons, inputs) | 3:1 | - |
| Graphical Objects | 3:1 | - |