Colour Blindness
Definition
Reduced ability to distinguish between certain colours, affecting how users perceive colour-coded information on websites.
What is Colour Blindness?
Colour blindness (or colour vision deficiency) is a reduced ability to distinguish between certain colours. It affects approximately 8% of men and 0.5% of women worldwide. The most common forms affect red-green perception.
For web design, colour blindness means some users cannot interpret information conveyed by colour alone.
Why Colour Blindness Matters for Web Design
Large Affected Population
With 1 in 12 men affected, a significant portion of your audience may perceive your site differently than intended.
Information Accessibility
Colour-coded information (errors in red, success in green) may be invisible to colour-blind users.
WCAG Requirement
WCAG prohibits using colour as the only means of conveying information.
Easy to Address
Design solutions that work for colour-blind users typically work better for everyone.
Types of Colour Blindness
Red-Green Colour Blindness (Most Common)
- Protanopia – Cannot perceive red light
- Deuteranopia – Cannot perceive green light
- Protanomaly/Deuteranomaly – Reduced sensitivity
Red and green look similar, often appearing brownish or olive.
Blue-Yellow Colour Blindness (Rare)
- Tritanopia – Cannot perceive blue light
- Tritanomaly – Reduced blue sensitivity
Complete Colour Blindness (Very Rare)
- Achromatopsia – No colour perception, only shades of grey
Design Guidelines
Never Rely on Colour Alone
Always supplement colour with:
- Text labels
- Patterns or textures
- Icons or symbols
- Different shapes
Example: Form Validation
Instead of only changing border colour for errors:
- Add error text explaining the problem
- Include an error icon
- Use multiple visual cues
Link Recognition
Don't rely on colour to identify links. Add underlines or other visual indicators.
Charts and Graphs
Use patterns, labels, or direct annotation rather than colour legends alone.
Colour Contrast
Beyond colour blindness, ensure sufficient contrast between text and background. WCAG AA requires:
- 4.5:1 contrast for normal text
- 3:1 contrast for large text
Testing for Colour Blindness
Browser Tools
Chrome DevTools includes colour vision simulation: More tools > Rendering > Emulate vision deficiencies
Contrast Checkers
Tools like WebAIM's contrast checker verify your colour combinations meet standards.
Simulation Tools
Plugins and apps simulate how your site appears to colour-blind users.