Designing for Color Blindness: Palettes, Patterns and Testing

Color blindness, or color vision deficiency, means seeing a narrower range of colors than most people. It rarely means seeing no color at all. Most often, certain pairs of colors that look clearly different to you look similar, or the same, to someone else. About 1 in 12 men and 1 in 200 women of Northern European descent have some form of it, so almost every product with a real audience has users who see its colors differently.

This guide explains the main types, which color pairs cause trouble, how to choose palettes that hold up, and how to test a design before you ship it. For contrast ratios and the WCAG levels themselves, see our guide to color contrast and WCAG.

How color vision works, briefly

The retina has three kinds of cone cells, each most sensitive to a different range of light: long wavelengths (reds), medium wavelengths (greens) and short wavelengths (blues). The brain compares their signals to work out a color. When one kind of cone is missing, or responds to a shifted range, some of those comparisons stop working and the colors they separate start to merge.

A milder form, where a cone type is present but shifted, is called an anomaly, such as deuteranomaly. A stronger form, where a cone type is missing, ends in -opia, such as deuteranopia. The milder forms are much more common, and people with them may not know they see color differently until a test or a confusing chart tells them.

The main types and what they confuse

Red-green: protan and deutan types

Protanopia and protanomaly affect the long-wavelength (red) cones. Deuteranopia and deuteranomaly affect the medium-wavelength (green) cones. Together they make up the large majority of color vision deficiency, and deuteranomaly is the single most common type. Because the genes involved sit on the X chromosome, they are far more common in men.

• Red and green, especially at similar lightness, such as a red error and a green success badge.
• Green, yellow, orange and brown, which can all look like variations of one muddy tone.
• Blue and purple, because the red part of purple is hard to see.
• Pink and gray, and some teals and grays.
• With protan types, reds also look darker than they do to most people, so red text on black can almost disappear.

Blue-yellow: tritan types

Tritanopia and tritanomaly affect the short-wavelength (blue) cones. They are rare and, unlike the red-green types, affect men and women about equally. People with tritan vision can confuse blue with green, yellow with pink or light gray, and purple with red.

Achromatopsia: little or no color

Achromatopsia, or complete color blindness, is very rare, at about 1 in 30,000 people. People with it see mostly in shades of gray and are often very sensitive to bright light. For them, a design works only if it works on lightness alone, which makes it a useful test case for everyone else.

Why red and green cause so much trouble

Red and green are the default colors for bad and good in many interfaces, and they are exactly the pair the most common types confuse. To make it worse, typical reds and greens are often close in lightness. A standard red #DC2626 and green #16A34A have a contrast of only 1.46:1 against each other. Without their hues, they are almost the same gray.

You don't have to drop red and green. You just can't let hue carry the whole message. Make one clearly darker than the other, and add a second signal such as an icon or a label.

Choosing safer color pairs

1. Separate colors by lightness first. Pair a dark color with a light one, rather than two mid-tones.
2. Prefer blue and orange over red and green for pairs like good and bad, before and after, or two data series. Blue and orange stay distinct for both protan and deutan vision.
3. If you need red and green, use a dark red with a light green, or the reverse. A dark red #B91C1C and a light green #4ADE80 are 3.71:1 apart, enough to tell apart on lightness alone.
4. Avoid pairing colors that differ only in hue at the same lightness and saturation, such as a mid green and a mid orange.
5. Use fewer colors. Every color you add makes another pair that has to stay distinct.

A blue #1D4ED8 and an orange #F97316 differ in hue and also in lightness, at 2.39:1 apart. The blue carries white text well (6.70:1), while the orange needs dark text, which is another useful cue.

Color-blind-friendly chart palettes

Charts are where color blindness causes the most real confusion, because readers have to match colors to a legend. A well-known option is the palette published by Masataka Okabe and Kei Ito, designed so its colors stay distinguishable across the common types of color vision deficiency.

Some of these colors are light, so check them against your background. The yellow #F0E442 is only 1.32:1 on white, fine for a filled area with an outline but invisible as a thin line. The blue #0072B2 reaches 5.18:1 on white and can carry small text. On a white background, use the darker colors for lines and small marks and the lighter ones for large fills.

• For ordered data, such as low to high, use one hue in steps of lightness, or a blue-to-orange scale, not a rainbow.
• For data that diverges from a middle value, put two hues on either end that differ in lightness, such as blue and orange, with a light neutral in the middle.
• For categories, use no more than about six to eight colors. Beyond that, group the rest as Other or use direct labels.

Never rely on color alone

The most important rule is also the simplest: color should never be the only way to tell two things apart. Our WCAG guide introduces the rule. Here is how to apply it to the parts of a design where color usually does all the work.

Status messages and form errors

• Pair each status color with its own icon: a check for success, a triangle for warning, a circle with a cross for error, an i for information.
• Start error messages with a word that says what happened, such as Error or Required, rather than only turning the text red.
• When a field has an error, add a message next to it and a thicker or differently styled border, not only a red one.

Links and selected states

• Underline links in body text. A link that differs from the text around it only by hue can be invisible to some readers.
• Mark selected tabs, chips and menu items with a shape change, such as an underline bar, a filled background or a check mark.
• Show toggles and switches with position and a label as well as color.

Charts and maps

• Label lines and bars directly, at the end of a line or on the bar, instead of only in a legend.
• Use different markers (circles, squares, triangles) or line styles (solid, dashed, dotted) for each series.
• Add patterns or hatching to bars and map regions that must be told apart.
• Put the values in a table or tooltip so the chart is never the only source.

How to test your design

You can't judge a palette for color blindness by eye if you don't have it. Simulators show an approximation of how a design looks with each type, and they are built into tools you probably already use.

• Chrome and Edge DevTools: open the Rendering panel and use Emulate vision deficiencies to view the page as protanopia, deuteranopia, tritanopia or achromatopsia.
• Firefox DevTools: the Accessibility panel has a Simulate menu with the same kinds of options.
• Operating system color filters: macOS, Windows, iOS and Android all offer a grayscale filter in their accessibility settings, a quick way to check a design on lightness alone.
• Design tools: Figma and other design apps have plugins that simulate color vision deficiency on a frame.

Simulators are approximations, and the milder forms vary from person to person. Use them to catch problems early, and if your product depends heavily on color, such as a data tool or a game, test with people who have color vision deficiency too.

A color-blind-friendly workflow

1. Pick your palette with lightness differences in mind, not only hue.
2. Check text and key interface colors against their backgrounds with a contrast checker.
3. Give every status, state and data series a second signal: an icon, a label, a pattern or a shape.
4. View the design in grayscale and with a protan and a deutan simulation.
5. Fix anything that disappears, then check again on a real layout.

When you build a palette in the generator, keep a clear spread from light to dark rather than several colors of the same lightness. Then preview it on a real layout, such as a dashboard, to see how the colors work together in charts and status messages.