Color blindness — Glossary

Color blindness, formally color vision deficiency, is a reduced ability to tell certain colors apart, and it affects about 1 in 12 men according to the US National Eye Institute. Most people with it are born with it and are not blind to color at all. For web design the rule that matters is WCAG success criterion 1.4.1 Use of Color, a Level A requirement that color must not be the only way to convey information.

How it works

Normal color vision uses three kinds of cone cells in the retina. A deficiency means one kind is missing or responds differently, which collapses some color differences. The National Eye Institute describes these groups.

Red-green: the most common type. Deuteranomaly makes some greens look more red. Protanomaly makes some reds look more green and less bright. Protanopia and deuteranopia remove the ability to tell red from green at all.
Blue-yellow: less common. Tritanomaly makes blue and green, and yellow and red, hard to separate. Tritanopia also confuses purple and red and makes colors look less bright.
Complete: monochromacy, or achromatopsia, where colors are not seen. It is rare.

Men have a much higher risk than women. Symptoms are often mild enough that people do not know they have the condition. For designers the practical consequence is that hue alone is an unreliable signal. A lightness difference gives a second signal, which is why contrast checks help even though WCAG contrast is not a color-blindness test.

const lin = v => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
const lum = h => { const n = parseInt(h.slice(1), 16);
  return 0.2126 * lin(n >> 16 & 255) + 0.7152 * lin(n >> 8 & 255) + 0.0722 * lin(n & 255); };
const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
const pairs = [['red vs green, same lightness', '#c00000', '#007a00'],
               ['red vs light green', '#c00000', '#80e080'],
               ['blue vs orange', '#0072b2', '#e69f00']];
for (const [n, a, b] of pairs) console.log(n.padEnd(30), a, b, ratio(a, b).toFixed(2) + ':1');

red vs green, same lightness   #c00000 #007a00 1.17:1
red vs light green             #c00000 #80e080 3.98:1
blue vs orange                 #0072b2 #e69f00 2.30:1

The first pair differs only in hue, with a luminance ratio of 1.17:1. Someone with protanopia or deuteranopia has little else to separate them, so a status dot that is red versus green with nothing else fails the intent of 1.4.1.

How common is color blindness?

About 1 in 12 men have a color vision deficiency, per the National Eye Institute. The rate in women is much lower, and the NEI does not give a single figure on the page used for this entry. Estimates of the exact percentage vary by population.

How do you design for color blindness?

Add a second cue that is not color: an icon, a text label, a pattern, an underline on links or a shape. Then make sure the two colors also differ in lightness. A contrast ratio check is a rough proxy for that, since the ratio is computed from luminance.

Common pitfalls

Red and green status only: pass and fail badges that differ only in hue. Add a symbol or word such as a check mark or the text Error.
Line charts keyed by color alone: series distinguished only by hue merge for some viewers. Vary the dash style, markers or direct labels.
Links with no underline: body links that differ from text only by hue need another cue, or enough contrast against surrounding text.
Trusting a simulator as a pass: simulations approximate one person's vision. Use them to find problems, not to claim compliance.
Using the word blind literally: most people with the condition see color but confuse specific pairs, so test specific pairs.

Related terms

WCAG AA — the level whose contrast and use-of-color criteria apply
WCAG AAA — stricter contrast thresholds of 7:1 and 4.5:1
RGB — the model screens use to produce the colors in question
HSL — shows hue separately from lightness, useful for adjusting lightness
Color management — controls how colors are reproduced, not how they are perceived