Colour-Blind Accessible Design
debt(d5/e3/b5/t7)
Closest to 'specialist tool catches it' (d5). Tools like axe, Lighthouse, and colour-contrast-analyser can flag contrast ratio failures and some colour-only information patterns, but they cannot fully detect all cases where colour is the sole differentiator (e.g., colour-coded charts without patterns, or nuanced status indicators). Automated detection catches the common contrast cases but misses many colour-blind-specific issues, keeping this at d5.
Closest to 'simple parameterised fix' (e3). The quick_fix is to pair every colour-based indicator with an icon, label, or pattern. This is not a one-line fix (multiple templates, CSS files, and design system tokens may need updating), but it's a well-understood pattern-based fix within individual components rather than an architectural rework. Typically touches several files but each fix is small and formulaic.
Closest to 'persistent productivity tax' (b5). This applies to all web contexts and must be considered in every UI component that conveys meaning through colour — forms, charts, dashboards, status indicators, navigation states. It's a cross-cutting design principle that every future maintainer and designer must keep in mind. It doesn't define the system's shape (not b7/b9), but it's more than localised since it affects every visual state across the entire frontend.
Closest to 'serious trap — contradicts how a similar concept works elsewhere' (t7). The misconception is precisely that passing WCAG contrast ratio checks means the design is colour-blind accessible. Developers and designers routinely conflate luminance contrast (which WCAG measures) with colour differentiation (which it doesn't). Red on white passes 4.5:1 contrast but fails red-green colour-blind users completely. This directly contradicts the intuition that 'accessible contrast = accessible colour', making it a serious cognitive trap where the 'obvious' validation step gives false confidence.
Also Known As
TL;DR
Explanation
Deuteranopia/protanopia (red-green, 6-8% of men) and tritanopia (blue-yellow) are the main types. Rules: never colour alone for meaning (error = red + icon + text), 4.5:1 contrast for normal text, patterns in charts. Test with Chrome DevTools Vision Deficiencies emulation. WCAG 1.4.1: colour must not be the only visual means of conveying information.
Watch Out
Common Misconception
Why It Matters
Common Mistakes
- Red/green only for status
- Colour-coded charts without patterns
- Not testing with colour vision simulators
Avoid When
- Never use red/green alone to indicate success/failure — the most common form of colour blindness (deuteranopia) makes these indistinguishable.
- Avoid very low contrast text even if it passes colour-blindness checks — low contrast fails users with low vision independently.
When To Use
- Always pair colour with a secondary indicator (icon, text label, pattern) for any state that carries meaning.
- Use a contrast checker (WCAG 2.1 AA requires 4.5:1 for normal text) on every colour combination in the design system.
- Test designs with a colour-blindness simulator (Coblis, Chrome DevTools vision emulation) before handoff.
Code Examples
/* Only colour:
.valid { border-color: green; }
.invalid { border-color: red; }/* Multiple cues:
.valid .msg::before { content: '✓ '; }
.invalid .msg::before { content: '✗ '; }