Color blindness and inclusive design: adapting colors

By Felipe Silva · Updated on Sep 25, 2026

To make colors work for people with color blindness, the core rule is simple: never use color as the only way to convey information. Pair color with text, icons, patterns or position, make sure elements that need to be told apart differ in lightness, and avoid relying on pairs like red and green. Do that, and your interface stays clear both for people who see every color and for those who don’t.

This guide covers the types of color vision deficiency, the combinations that cause the most confusion, the techniques that work in interfaces, charts and maps, and how to test your design before you ship it.

What color blindness is and how many people it affects

The retina has three types of cones, sensitive to long wavelengths (L, associated with red), medium (M, green) and short (S, blue). Color blindness, or color vision deficiency, happens when one of those cone types is missing or has shifted sensitivity. It’s usually inherited and linked to the X chromosome, which is why it’s far more common in men.

The well-established numbers: about 8% of men and 0.5% of women of European descent have some form of red-green deficiency. The most common form is deuteranomaly. Blue-yellow deficiencies and achromatopsia are rare. In practice, any product with thousands of users is almost certainly serving color-blind people every day.

One important point: color blindness rarely means seeing in black and white. Most people with it do see color; they just confuse certain pairs.

Types of color blindness

The suffixes signal severity: -anopia when a cone type is absent and -anomaly when it’s present but with altered sensitivity (the milder and more frequent form).

Problematic color pairs

These are the pairs that cause the most trouble in interfaces and charts, especially when they have similar lightness:

• Red and green: the classic case. red and green used for “error” and “OK” indicators can look nearly identical to people with protan and deutan deficiencies.
• Green and brown: #008000 and brown #8B4513 are easy to mix up, which is common in terrain maps and “natural” themes.
• Blue and purple: purple is blue plus a red component; if red is poorly perceived, what’s left is blue. blue and purple end up almost the same.
• Green and gray: low-saturation greens drift toward gray, a problem when “active” is green and “inactive” is gray.
• Light blue and gray: a sky blue next to a light gray can lose the difference, especially for tritan deficiencies and on dim screens.

The problem isn’t using these colors; it’s using them as the only difference between two pieces of information.

Don’t rely on color alone (WCAG 1.4.1)

WCAG success criterion 1.4.1 Use of Color, level A, requires that color is not the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. How to apply it:

• Forms: besides a red border, show an icon and a message such as “Enter a valid email address.”
• Success and error states: use icons with different shapes (a circle with ✓, a triangle with !) plus text, not just green and red.
• Links in body text: keep the underline, or ensure 3:1 contrast with the surrounding text plus an extra cue on focus and hover.
• Required fields: write “required” or use an asterisk that’s explained, rather than just coloring the label.
• Status in tables: “Approved,” “Pending” and “Rejected” as text, with color as reinforcement.

Worked example: a status dashboard

Picture a server dashboard where each row has a green dot (up) or a red dot (down). For many color-blind users, both dots look the same, and the most important information on the screen disappears. The fix doesn’t require changing your visual identity:

1. Replace the dot with an icon that has its own shape for each state, such as ✓ for “up” and ✕ for “down.”
2. Add the state as text next to the icon.
3. Sort or group failing rows at the top, so position communicates too.
4. Keep the colors as reinforcement, choosing shades with clearly different lightness.

Charts, data and maps

Data visualization is where color blindness gets in the way most, because color-coded legends force readers to compare hues.

Direct labels

Write the series name next to the line or bar instead of making readers bounce back and forth to a legend. It helps everyone, not just color-blind readers.

Patterns, textures and shapes

For bars and areas, use hatching, dots or stripes; for lines, combine solid, dashed and dotted strokes; for scatter plots, vary the marker shape (circle, square, triangle).

Color-blind-friendly palettes

Blue × orange is distinguishable for the most common types of color blindness and is a good replacement for red × green. For charts with several categories, the Okabe-Ito palette is a well-established reference:

Even with a safe palette, more than five or six categories in a single chart is hard for any reader. In those cases, group the data or split it into smaller charts.

Maps

For heat maps and choropleths, prefer sequential scales that vary mainly in lightness (light to dark in a single hue) or diverging blue–orange scales. Avoid the “rainbow” and the red–yellow–green scale, which has stretches that deutan and protan viewers can’t tell apart. On transit or route maps, add numbers, names or line patterns to the colors.

Lightness contrast

People with color blindness still perceive the difference between light and dark well. That makes lightness your best ally: two colors with very different lightness remain distinguishable even when the hue is lost.

The numbers show why red and green fail so often. Pure red #FF0000 and green #008000 have a contrast ratio of just 1.28:1 against each other, meaning almost identical lightness. Once the hue stops registering, you’re left with practically the same blob. By contrast, the Okabe-Ito blue #0072B2 and orange #E69F00 reach 2.3:1, and they also differ along a color axis (blue–yellow) that red-green deficiencies preserve.

A quick test is to convert your layout to grayscale. If two elements that must look different turn into the same gray, adjust the lightness of one of them. For text, follow the WCAG minimums (4.5:1 for normal text, 3:1 for large text), and for UI components and chart parts, 3:1 under criterion 1.4.11. Measure in the contrast checker and get the details in the color contrast and accessibility guide.

How to test your colors

• Color blindness simulator: upload a screenshot, chart or photo to the color blindness simulator and compare the image across the different deficiency types.
• Chrome and Edge DevTools: open the Rendering panel (from the DevTools “More tools” menu) and use Emulate vision deficiencies, which simulates protanopia, deuteranopia, tritanopia and achromatopsia across the whole page, plus blurred vision.
• Firefox: the DevTools Accessibility Inspector also offers color vision deficiency simulation.
• Real people: simulations are approximations. Whenever you can, ask color-blind users for feedback.

Run these tests early, at the palette and prototype stage, when swapping a color is still cheap. The palette generator helps you explore alternatives before you lock in the color system.

Inclusive design checklist for color blindness

1. No information depends on color alone: there’s supporting text, an icon, a pattern or position.
2. Error, warning and success states have differently shaped icons and written messages.
3. Links in body text have an underline or another cue besides color.
4. Charts use direct labels and, when needed, patterns or marker shapes.
5. The data palette avoids red × green and uses pairs like blue × orange or Okabe-Ito.
6. Maps use lightness-based sequential scales or safe diverging scales, never a rainbow.
7. Elements stay distinguishable in grayscale.
8. Contrast meets WCAG: 4.5:1 for text, 3:1 for large text and UI components.
9. The layout has been checked in the simulator and with DevTools emulation.

Next, test your screens in the color blindness simulator, measure your pairs in the contrast checker and build a new base in the palette generator. The guide on how to choose a color palette for your website shows how to apply all of this to a complete color system.