Aura Mixer
Accessibility•9 min read

Designing for Color Blindness

8% of men and 0.5% of women have some form of color vision deficiency.

The Numbers

With ~300 million color-blind people worldwide, a website with 100,000 visitors likely has 4,000+ users with color vision deficiency. Designing for CVD isn't edge-case thinking — it's mainstream accessibility.

Types of Color Vision Deficiency

Deuteranopia

6% of males

Red-green deficiency (green cone affected). Most common form.

Common confusions: Red/green, purple/blue, pink/gray

Protanopia

2% of males

Red-green deficiency (red cone affected). Red appears darker.

Common confusions: Red/green, red/black, purple/blue

Tritanopia

0.01% of population

Blue-yellow deficiency. Rare but significant.

Common confusions: Blue/green, yellow/violet, orange/pink

Achromatopsia

0.003% of population

Complete color blindness. Sees only grayscale.

Common confusions: All colors with similar brightness

Design Principles for CVD

  1. 1

    Never rely on color alone

    Add icons, patterns, labels, or underlines. "Red means error" doesn't work if someone can't see red.

  2. 2

    Use high brightness contrast

    Even without color perception, light vs. dark remains distinguishable. Ensure your colors differ in luminance.

  3. 3

    Avoid red/green combinations

    The most common CVD is red-green. Use blue/orange or blue/yellow for better distinction.

  4. 4

    Test with simulators

    Use tools that simulate how your design appears to people with different types of CVD.

Safe Color Combinations

✓ CVD-Friendly Pairs

Blue + Orange
Blue + Yellow
Purple + Yellow
Black + White

✗ Problematic Pairs

Red + Green
Green + Brown
Light Blue + Purple
Pink + Gray

UI Patterns That Work

Error States

Instead of just turning text red, add an error icon (⚠️ or ❌), underline the field, or display explicit error text.

Success States

Don't just turn things green — add a checkmark (✓), change the icon, or display a success message.

Charts & Graphs

Use patterns (stripes, dots, hatching) in addition to colors. Always label directly rather than relying on color legends.

Links

Underline links rather than relying solely on color to distinguish them from regular text.

Create CVD-Friendly Palettes

Our AI generates palettes optimized for color blindness accessibility.

Generate Accessible Palette