Designing for color blindness: how to make palettes that work for everyone

About 8% of males have some form of color vision deficiency. For most design outputs — UI, data visualization, infographics — that is too large a portion of your audience to leave to chance. Accessible palettes are not a constraint on creativity. They are a higher-order design skill.

Accessibility Color Theory UI Design

Highlights

The most common color vision deficiency — deuteranopia — makes reds and greens look nearly identical. If your UI uses a red/green pair for error/success states, that distinction is invisible to roughly 6% of your male audience.

Luminance contrast is the universal fallback. Even people with complete color blindness (achromatopsia) perceive brightness. A palette that works in grayscale will work for everyone.

Blue and orange remain distinguishable under deuteranopia and protanopia, making them the most reliable pair for data visualization that needs to communicate a two-category distinction.

The problem with red and green

The red-green combination is the designer's default for good and bad, yes and no, pass and fail. It is visually intuitive for people with typical color vision — and it communicates almost nothing to the 6% of males with deuteranopia, who perceive red and green as essentially the same brownish-olive hue. The solution is not to avoid red and green entirely. It is to use them with redundant cues: an icon alongside the color, a text label, or a shape change. Color should confirm meaning that is already established by other means, not carry the full communicative load on its own. When you can supplement with a shape or label, the red-green pair works fine. When color is the only signal — in a map legend, a chart line, a status dot — it will fail for a significant portion of your audience.

Luminance as the universal language

Every form of color vision deficiency preserves luminance perception. Even achromatopsia — complete absence of color perception — still processes light and dark. This makes luminance contrast the most reliable tool in an accessible color system. A palette that reads clearly in grayscale will communicate its hierarchy to every user. The practical implication: before finalizing a palette, convert it to grayscale and verify that each color occupies a distinct lightness level. If two important colors merge into the same gray, they will be indistinguishable to someone with full color blindness — and possibly confused by people with partial deficiencies as well. The WCAG contrast requirement (4.5:1 for normal text) is essentially a luminance contract. Meeting it is a meaningful accessibility baseline, not just a legal checkbox.

Better pairs for data visualization

For two-category distinctions in charts, maps, and dashboards, the blue-orange combination is the most universally legible. Blue and orange remain well-separated under deuteranopia, protanopia, and tritanopia — unlike red-green (fails under deutan/protan) or blue-green (fails under tritan). For three-category data, add a high-luminance yellow or a muted purple as the third value. Avoid putting red and green in the same legend unless they are supported by redundant cues. For sequential scales — light to dark within a single hue — choose a hue with high saturation at the dark end, since saturation differences collapse under color blindness but luminance differences do not. The Dark Mode UI Kit includes pre-specified status-color tokens (error, warning, success, info) built to remain distinguishable under the three major deficiency types.

Newer issue

Seasonal palette shifts: how to adapt your core system for campaign content

2026-09-24

Older issue

Color temperature in design: warm, cool, and the tension between them

2026-10-08