Colour-Blind Accessible Design

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: '✗ '; }

References

• ↗ https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

Tags

Related Terms