Web Color Accessibility: WCAG 2.2 Guide
Make your website usable for everyone. This guide covers contrast ratios, color blindness, and WCAG 2.2 standards so you can design for accessibility.
Why Color Accessibility Matters
People worldwide live with disabilities. This is 16% of the global population.
Color accessibility means your content works for people with visual impairments, color vision deficiencies, or temporary vision issues. It also helps people using screens in bright sunlight or on small mobile devices.
- Legal Requirements:ADA, Section 508, and international laws require accessible digital content
- Business Impact:Inaccessible websites exclude potential customers and limit your market reach
- Better UX for Everyone:Accessible design makes websites easier to use for everyone
WCAG 2.2 Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios for text readability. The current standards are:
Level AA
WCAG 2.2Standard compliance level for most websites
Level AAA
WCAG 2.2Highest compliance level for enhanced accessibility
Text Size Definitions
- Normal Text: Smaller than 18pt (24px) or 14pt bold (19px bold)
- Large Text: 18pt (24px) or larger, or 14pt (19px) bold or larger
WCAG Compliant Color Combinations
These color combinations pass WCAG AA standards and most pass AAA. You can use them as starting points for your designs:
Color Vision Deficiencies
People worldwide have some form of color vision deficiency (color blindness). Red-green color blindness is the most common type and affects 8% of men with Northern European ancestry.
Protanopia
Red-BlindRed appears as black/yellow
Avoid red/green combinations, use blue/orange instead
Deuteranopia
Green-BlindGreen appears as beige/yellow
Most common form, use patterns + color
Tritanopia
Blue-BlindBlue appears as greenish/yellow
Avoid blue/yellow combinations
Achromatopsia
MonochromacyTotal color blindness (grayscale)
Ensure contrast works in grayscale
Accessibility Best Practices
1. Never Use Color Alone
Always pair color with another visual indicator. Use icons, patterns, underlines, or text labels so information is not conveyed only through color.
2. Test in Grayscale
View your design in grayscale to check that information is still understandable without color.
3. Use High Contrast for Interactive Elements
Buttons, links, and form inputs need strong contrast so users can identify them easily.
4. Provide Sufficient Color Contrast
Aim for AAA compliance (7:1 for normal text) when you can. Higher contrast helps everyone, especially when viewing screens in bright light or on small mobile devices.
5. Avoid Problematic Color Pairs
Avoid red/green, green/brown, blue/purple, and light yellow combinations. Color blind users often have trouble distinguishing these pairs.
How to Test Color Accessibility
Automated Contrast Checkers
Use tools like WebAIM Contrast Checker, Contrast Ratio, or browser extensions to check that color combinations meet WCAG standards.
Color Blindness Simulators
Preview your designs through simulators like Toptal Color Filter or Chrome extensions to see how color blind users will see your interface.
Accessibility Auditors
Run full accessibility audits with axe DevTools, Lighthouse, or WAVE to find color issues and other accessibility problems.
User Testing
Test with real users who have disabilities. Include people with visual impairments in your usability testing.
Build Accessible Designs Today
Use our tools to create color combinations that everyone can read. Accessibility is required by law in many countries and is the right thing to do.