Color Blindness
Reduced ability to distinguish certain colours, affecting 8% of males and 0.5% of females.
Plain English
Color blindness is far more common than most designers assume — roughly 1 in 12 men has some form of it. The most common type, red-green colour blindness, means success (green) and error (red) states look identical. The fix is simple: never rely on colour alone to communicate meaning. Add an icon, a label, or a pattern alongside every colour signal. This is not an edge case — it is a significant portion of your users.
Technical
Types: Deuteranopia/deuteranomaly (red-green, most common), protanopia/protanomaly (red-green, less common), tritanopia (blue-yellow, rare), achromatopsia (complete monochromacy, very rare). Design rule: ensure information conveyed by colour is also conveyed by shape, pattern, or text. Tools: Sim Daltonism (Mac), the Figma "Color Blind" plugin, Chrome DevTools accessibility pane (vision deficiency simulation). WCAG 1.4.1: "Use of Color" requires that colour is not the only visual means of conveying information.
Live Demo
Color only — inaccessible
No icon or label — fails for red-green colorblind users
Color + icon + label — accessible
Works for everyone regardless of color vision
8% of men have color vision deficiency. Never use color as the only signal.
Usage
✓ Good usage
Show form validation errors with: red border + ⚠ icon + "This field is required" text — three distinct signals, only one of which is colour.
✗ Bad usage
Showing a success state with only a green background and an error state with only a red background — indistinguishable to red-green colour-blind users.
Recommended values
- Always pair colour with icon + text label for status (error, success, warning)
- Check designs with colour blindness simulators before shipping
- Ensure chart lines are distinguishable by shape/pattern, not only colour
- Border + icon = sufficient; icon alone without label is borderline
- Heatmaps: use blue-to-red or sequential single-hue scales instead of red-green
Common mistakes
- Red/green as the only distinguisher for success/error states in forms, charts, or dashboards.
- Charts with red and green lines as the only way to distinguish data series.
- Not testing designs with colour blindness simulators.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Never use colour as the only signal for any status or state. Every error shows: red border + error icon + text message. Every success shows: green border + checkmark icon + text message. Every chart series has a unique marker shape, not just a unique colour.