Designing Icons for Color Blindness: Best Practices

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency (CVD). The most common form is Red-Green color blindness (Deuteranomaly/Protanomaly).

A classic mistake in UI design is relying exclusively on color to indicate the state of an element. If a “System Status” indicator is a solid circle that turns red for “Error” and green for “Success,” a user with Red-Green color blindness may see no difference at all.

Here are the best practices for designing and coding SVG icons for color blindness.

Rule #1: Double Encoding (Shape + Color)

The golden rule of accessible icon design is Double Encoding. You must convey information using at least two visual channels. If color is one channel, shape or pattern must be the second.

Example: Form Validation

Bad Design: A text input field has a small circle icon next to it. It turns red if the password is too short, and green if it’s correct.

Good Design:

Error State: A red circle containing an ‘X’ (or an exclamation mark).
Success State: A green circle containing a Checkmark.

By changing the shape (the X vs the Check), the user doesn’t need to perceive the red/green hue to understand the system state.

Rule #2: Contrast Variations for States

If you must use the same shape for different states, you must vary the luminance (brightness/contrast), not just the hue.

Imagine a “Favorite” star icon.

Inactive: A light gray outline.
Active: A solid yellow fill.

Even if a user views the screen in total grayscale (Achromatopsia), the difference between a thin outline and a solid filled shape is immediately obvious.

<!-- Inactive State (Outline) -->
<svg class="star-outline" stroke="currentColor" fill="none">...</svg>

<!-- Active State (Solid) -->
<svg class="star-solid" stroke="none" fill="currentColor">...</svg>

Rule #3: Avoiding Problematic Color Combinations

If your UI requires colored status dots (e.g., Jira tickets, server status dashboards), avoid the following pairings adjacent to each other:

Green & Red (Protanopia/Deuteranopia)
Green & Brown
Blue & Purple
Light Green & Yellow

The Accessible Status Palette

Instead of pure Red/Green, shift your hues:

Use a bluish-green (Teal) for success.
Use an orange-red (Vermilion) for errors.
Use Blue for info/active states (Blue/Yellow color blindness is much rarer, making Blue a very safe UI color).

Coding for High Contrast and Textures

For data visualization (charts, graphs) built with SVGs, color blindness is a massive hurdle. A pie chart with 6 different colored slices is unreadable to many.

You can use SVG <pattern> elements to apply textures (stripes, dots, crosshatches) to your SVG paths, providing a secondary visual channel.

<svg>
  <defs>
    <!-- Define a striped pattern -->
    <pattern id="stripes" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="black" stroke-width="1" />
    </pattern>
  </defs>
  
  <!-- Slice 1: Solid Color -->
  <path fill="#3B82F6" d="..." />
  
  <!-- Slice 2: Textured -->
  <path fill="url(#stripes)" d="..." />
</svg>

How to Test Your Designs

You do not need to guess how your UI looks to color-blind users. In Google Chrome / Edge:

Open DevTools.
Open the Rendering tab (you may need to find it in the “More tools” menu).
Scroll down to Emulate vision deficiencies.
Select “Protanopia” or “Deuteranopia”.

Review your site. If two icons or status indicators look identical, you need to apply Double Encoding (change the shape, add an outline, or add a text label).

Summary

Designing for color blindness isn’t about restricting your color palette; it’s about adding clarity. Always use Double Encoding (Shape + Color), vary your fill styles (solid vs outline), and test your SVGs using browser emulation tools to ensure your UI is universally understood.