Color Accessibility Goes Beyond Contrast Ratios

Meeting contrast guidelines is only one part of accessible color design. Even palettes with strong contrast can fail users who perceive colors differently. Colorblindness exists on a spectrum, as Bela Gaytán has noted, and each person's experience is unique. There is no single “colorblind condition” that applies uniformly to everyone.

Different kinds of color weaknesses with the percentage of people having these anomalies.
Different people perceive colors differently. Around 300 million people are affected by color weakness or colorblindness. (Large preview)

Two distinct conditions matter here. People with color weaknesses have a deficiency in translating light waves into red-ish, green-ish, or blue-ish colors. Those with colorblindness lack that translation entirely. The most common case is a red/green deficiency, which affects roughly 8% of European men and 0.5% of European women. Depending on your color combinations, users with these conditions may not be able to tell certain colors apart.

The statistics and descriptions above draw from Lisa Charlotte Muth's three-part series on how colorblind and colorweak readers perceive colors, including guidance for data visualization and practical insight into living with colorblindness.

Practical Dos and Don'ts for Colorblind-Safe Palettes

Gareth Robins suggests two safe paths: provide a colorblind toggle that also uses shapes, or adopt a ubiquitous palette such as viridis. Never ask a colorblind person “What color is this?” — they cannot answer that question accurately.

How red- and green-blind people perceive pink, turquoise, and grey
For red- and green-blind people, red and green might look like grey. Designed by Lisa Charlotte Muth. (Large preview)

What works well:

  • Red/green deficiencies are more common in men, so design with male users in mind by default.
  • Use blue if you want users to perceive color as you do.
  • Any two colors work if they vary by lightness.
  • Colorblind users can tell red and green apart.
  • The safest palette is to mix blue with orange or red.

What to avoid:

  • Don't mix red, green, and brown together.
  • Don't mix pink, turquoise, and grey together.
  • Don't mix purple and blue together.
  • Don't use green and pink if you also use red and blue.
  • Don't mix green with orange, red, or blue of the same lightness.

Colorblind users cannot tell dark green from brown, nor red from brown. Be mindful when those combinations appear side by side.

How red- and green-blind people perceive purple and blue
For red- and green-blind people, red-purple looks like blue. Designed by Lisa Charlotte Muth. (Large preview)

Don't Rely on Hue Alone

The most reliable approach is to never communicate data with color alone. Pair hues with labels, icons, shapes, rectangles, triangles, and stars to indicate differences and relationships. When combining hues with patterns, be cautious: patterns can shift how bright or dark colors appear to users.

WhoCanUse.com, showing how different people with visual impairments see the same color palette
WhoCanUse?, a fantastic little tool to quickly see how a color palette affects different people with visual impairments. (Large preview)

For quick checks, Who Can Use? shows how a palette affects people with various visual impairments — from reduced red sensitivity to red/green blindness, cataracts, glaucoma, low vision, and situational conditions such as direct sunlight and night shift mode.

Build gradients with lightness variation, not just hue changes. This ensures readers with color vision deficiencies can still distinguish values in your visualizations. And above all, include colorweak and colorblind people in your usability testing.

Resources and Tools