WCAG Contrast Checker
Check color contrast ratios for WCAG 2.1 accessibility compliance
Large Text Preview (18pt+)
Normal text preview - This is how regular body text will appear with these colors.
Contrast Ratio
21.0:1
WCAG 2.1 Compliance
AA Normal Text
PASS
(Requires 4.5:1)
AA Large Text
PASS
(Requires 3.0:1)
AAA Normal Text
PASS
(Requires 7.0:1)
AAA Large Text
PASS
(Requires 4.5:1)
Recommendation:
Your color combination passes WCAG AA standards for normal text. Great job!
About WCAG Contrast Ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable
for people with visual impairments. This tool helps you verify that your color combinations meet these standards.
WCAG Standards:
-
WCAG AA (Minimum):
- Normal text: 4.5:1 contrast ratio
- Large text (18pt+ or 14pt+ bold): 3.0:1 contrast ratio
-
WCAG AAA (Enhanced):
- Normal text: 7.0:1 contrast ratio
- Large text (18pt+ or 14pt+ bold): 4.5:1 contrast ratio
Why Contrast Matters:
- Ensures readability for users with low vision or color blindness
- Improves usability in different lighting conditions (bright sunlight, dim screens)
- Legal requirement in many jurisdictions (ADA, Section 508, etc.)
- Better user experience for all users
Tips for Good Contrast:
- Dark text on light backgrounds is usually best (e.g., black on white = 21:1)
- Avoid gray text on gray backgrounds
- Test your designs with real users or accessibility tools
- Consider using slightly off-black (#333333) instead of pure black for reduced eye strain
- Remember that contrast requirements apply to text, icons, and UI controls
Example Ratios:
- Black on White (#000000 on #FFFFFF): 21:1 - Passes all standards
- Dark Gray on White (#666666 on #FFFFFF): 5.74:1 - Passes AA
- Light Gray on White (#999999 on #FFFFFF): 2.85:1 - Fails all standards for normal text