Design for red–green color blindnessso the meaning survives when red and green look alike
Red–green deficiency is the common kind: 7.4% of men and 0.5% of women of European ancestry in the studies Sharpe and colleagues collected, and deuteranomaly alone is 4.63% of men. Reds, oranges, browns and greens drift together, so a design that tells them apart by hue alone fails these readers. This is the workflow that fixes it, with four worked examples measured in simulated vision.
The number is the CIEDE2000 distance between the two.
Red–green, men of European ancestry
7.4%
Deuteranomaly alone, men
4.63%
Examples, each measured
4
The problem
What changes, and what survives
In protanopia and deuteranopia one kind of cone is missing; in protanomaly and deuteranomaly it is shifted. Either way, colors that differ only along the red–green direction come together, while lightness and the blue–yellow direction survive. A simulation shows that loss of difference, not what any one person sees, and it is no diagnosis.
What still works
A difference in lightness: dark against light reads the same to everyone.
Blue against orange or yellow: that direction is left intact.
Anything that is not color: a word, an icon or shape, a pattern, a position.
The order matters: the first step makes the others forgiving, and the last one checks the model against people.
1
Give the meaning a second carrier first
Before choosing any color, decide how the meaning reads without it: a word, an icon or shape, a pattern, or a position. WCAG 1.4.1 asks for exactly this.
Pick colors that differ in lightness, so they stay apart even in grayscale, and give every mark 3:1 against its background, as WCAG 1.4.11 asks of graphics.
When hue must change, set blue against orange or vermilion, as the Okabe–Ito palette does, instead of red against green. For a diverging scale, use purple–orange or red–blue in place of red–yellow–green.
Look at the design as protanopia and deuteranopia see it, and measure the colors that must differ. On this site’s scale, a CIEDE2000 distance under 10 is only noticeable and under 5 is a close match: too little to carry meaning on its own.
A simulation is a model of one dimension of vision. Ask colleagues and users with color vision deficiency to use the real thing, and change what they stumble on.
Each example is drawn twice: as it is often built, and fixed. Switch the view to see both as a red–green type does. The numbers under each are measured, not judged.
A line chart
Two series told apart by a red and a green line and a legend in the corner: the most common chart there is, and under deuteranopia its two lines are a close match.
×As often built
SalesReturns
JanFebMarAprMayJun
✓Fixed
JanFebMarAprMayJunSalesReturns
What changed
Blue and vermilion from the Okabe–Ito palette, both 3:1 or more on white.
A label at the end of each line, so nobody matches colors to a legend.
Circles on one line and squares on the other, and one line dashed: three carriers besides hue.
Measured
A line chart: CIEDE2000 between the colors that must differ, in each view
A green dot for up and a red one for down. Even the site’s own success and error colors, chosen for contrast, come close under simulation and nearly meet in grayscale.
×As often built
Server
Status
Mumbai
Pune
Delhi
Chennai
OnlineOffline
✓Fixed
Server
Status
Mumbai
Online
Pune
Offline
Delhi
Online
Chennai
Offline
What changed
A word in every cell: the state is read, not decoded.
A tick and a cross: two shapes nobody confuses.
The colors stay as a third cue, measured for contrast against their tints.
Measured
Status in a table: CIEDE2000 between the colors that must differ, in each view
Validity shown by the border alone: green for good, red for wrong. To a red–green reader the two fields look almost the same, and a screen reader hears nothing at all.
×As often built
✓Fixed
Error: enter a 10-digit phone number
What changed
An error message in words, starting with “Error”, tied to the field with aria-describedby.
An icon beside the message and a thicker border on the field in error.
Valid fields need no color at all: they simply have no message.
Measured
A form field: CIEDE2000 between the colors that must differ, in each view
Growth by region and quarter on a red–yellow–green scale, with no numbers. Under deuteranopia its two ends are only noticeably apart, so falls and rises blur.
×As often built
Growth on last year by region and quarter, shown by color alone
Q1
Q2
Q3
Q4
North
South
East
West
✓Fixed
Growth on last year by region and quarter, with each value printed; cells below zero are hatched
Q1
Q2
Q3
Q4
North
−6
−2
+3
+8
South
+4
+7
+9
+12
East
−9
−4
+1
+5
West
+2
−1
−3
+6
Hatched: below zero
What changed
Purple–orange in place of red–yellow–green: its ends stay distinct in every simulation.
The value printed in every cell, in whichever ink reads best on it.
A hatch pattern on every cell below zero: a pattern carries the sign without any color.
Measured
A heatmap: CIEDE2000 between the colors that must differ, in each view