Color-blind friendly color palettes for UI and charts

Summary

Around 8% of men and 0.5% of women have some form of color-vision deficiency, overwhelmingly red-green. A palette that distinguishes its colors only by hue — a red error beside a green success, a red chart series beside a green one — is invisible to them in exactly the place it matters. A color-blind friendly palette is not a special set of colors; it is any palette whose colors also differ in lightness, backed by an interface that never uses color as the only channel. This guide explains which deficiencies to design for, the two rules, how to check a palette in a browser, and which published palettes to start from for charts, with hex codes.

• Design for deuteranopia and protanopia (red-green, ~99% of cases); treat tritanopia as a bonus.
• Separate lightness, not just hue: any two colors that must be told apart should be different grays.
• Never color alone: pair color with an icon, label, pattern or position.
• For charts, start from Okabe-Ito, Paul Tol or IBM's published palettes rather than inventing one.

Which color blindness to design for

"Color blind" covers several conditions, and they do not fail in the same way.

Deuteranomaly and deuteranopia — reduced or absent green sensitivity — are by far the most common, around 6% of men. Reds, greens, oranges, browns and some yellows drift toward each other; a red-green pair becomes two muddy ochres.

Protanomaly and protanopia — reduced or absent red sensitivity — affect around 2% of men and look similar, with reds appearing darker.

Tritanopia — blue-yellow — is rare (under 0.01%) and merges blues with greens and yellows with pinks.

Achromatopsia — no color vision — is very rare, but it is also the model for the simplest test: convert to grayscale.

Design for the red-green group and you cover 99% of affected users. The grayscale test covers everyone, which is why it is the one to run.

Rule 1: separate lightness

Hue is the channel that color-vision deficiency damages; lightness is the channel it leaves alone. So the rule is that any two colors that must be distinguishable should differ in lightness enough to read as different grays — roughly 20 percentage points of HSL lightness, or a contrast ratio of 3:1 between them.

This is why a triadic palette built from red, green and blue at the same lightness fails for deuteranopes while the same three hues at 30%, 50% and 70% lightness pass: the hue difference is gone but the lightness difference remains. It is also why the safe status trio is a dark red, a mid amber and a light green rather than three fully saturated colors at 50%.

The palette generator places its neutral roles at fixed lightness steps for this reason; the brand roles you add still need checking against each other.

Rule 2: never color alone

WCAG 1.4.1 says it directly: color must not be the only visual means of conveying information. Whatever the palette, an interface that communicates with color needs a second channel.

• Status: an icon beside the color — a check, a triangle, a circle-x — and, for text, the word.
• Charts: a legend that identifies series by shape or pattern as well as color; direct labels on lines; hatching on bars when there are more than four.
• Form validation: the message, not just a red border.
• Links: an underline, or at minimum a lightness difference from body text, not a hue difference alone.
• Toggles and selection: a position, a check mark or a fill change, not just a color change.

Do this and the palette question becomes much less critical, because color is doing what it should — reinforcing a distinction that is already visible.

Checking a palette

Three checks, in order of cost.

Grayscale. Desaturate a screenshot (any image editor, or a CSS filter: grayscale(1) on the root for a live check). Every pair of colors that must be told apart should be visibly different grays. If two merge, push their lightness apart.

Simulate the deficiencies. Chrome and Edge DevTools have "Emulate vision deficiencies" in the Rendering panel; Firefox has a similar option under Accessibility. Cycle through protanopia, deuteranopia and tritanopia and look at every place color carries meaning — status, charts, tags, selection.

Contrast between the colors, not just against the background. Tools check text against its background; they rarely check two adjacent chart series against each other. Measure it: two series that must be distinguished should reach about 3:1 with each other, the same threshold WCAG uses for non-text graphics.

Safe palettes for interfaces

For the brand and status colors of an interface, the safest primaries are the blues and violets — they survive every deficiency because the blue channel is intact — with accents chosen so that each differs from the primary in lightness as well as hue.

A status trio that passes:

Pair each with an icon and the trio works for every group. If the brand primary is itself red or green, move the matching status color further away — an orange-red error, a teal success — and check the pair in grayscale.

Safe palettes for charts

Data visualization is where the problem bites hardest, because a chart with six series has six colors that must all be told apart and no icon to help. Do not invent a palette; three published ones are tested against every deficiency and are the right starting point.

Okabe and Ito (2008) — eight colors designed for the red-green group, and the most widely adopted:

#000000  black
#e69f00  orange
#56b4e9  sky blue
#009e73  bluish green
#f0e442  yellow
#0072b2  blue
#d55e00  vermilion
#cc79a7  reddish purple

Paul Tol's "bright" scheme — seven colors that are also distinct in print:

#4477aa  blue
#ee6677  red
#228833  green
#ccbb44  yellow
#66ccee  cyan
#aa3377  purple
#bbbbbb  grey

IBM Design's color-blind safe set — five colors that also suit dark backgrounds:

#648fff  blue
#785ef0  purple
#dc267f  magenta
#fe6100  orange
#ffb000  gold

Three practices go with them. Use the colors in order — the first two or three series in any of these palettes are the most distinct pairs. Prefer a sequential palette (one hue, many lightness steps) for ordered data such as intensity or time, which color-vision deficiency does not affect at all. And above four series, add a second channel — line dash patterns, marker shapes, direct labels — because no eight-color palette is unambiguous for everyone.

Tinting a safe palette toward the brand

A published chart palette rarely matches a product's brand, and it does not need to: charts are content, and content is allowed to have its own colors. Where a match is wanted, shift the neutrals rather than the series — the chart background, gridlines and axis text can take the brand tint from the theme while the series keep their tested hues. If a brand primary must appear as the first series, replace the palette's blue with it and re-run the grayscale check against the remaining colors.

The theme generator emits shadcn/ui's --chart-1 through --chart-5 tokens with a default ramp taken from the brand roles — fine for a single-series sparkline, not for a five-series chart. Override those five tokens with one of the tested palettes above; the extended-colors panel accepts a hex per chart slot, so the interface palette and the chart palette can be decided separately.

Q&A

Question: What is a color-blind friendly color palette?

Short answer: Any palette whose colors differ in lightness as well as hue, so that two colors which must be told apart remain distinct when the hue information is lost. It is a property of lightness contrast and of never using color as the only signal, not a special set of hues.

Question: What colors should be avoided for color-blind users?

Short answer: Red beside green at similar lightness is the worst pair; red-brown, green-brown, blue-purple and light green-yellow also merge for the red-green group. None is forbidden — all of them work once the two colors differ in lightness and a second channel (icon, label, pattern) carries the meaning.

Question: What is the best palette for color-blind-safe charts?

Short answer: Okabe-Ito's eight colors are the standard; Paul Tol's schemes and IBM's five-color set are proven alternatives. Use them in order, prefer a single-hue sequential ramp for ordered data, and add dash patterns or direct labels beyond four series.

Question: How do I check if my palette is color-blind friendly?

Short answer: Convert a screenshot to grayscale and confirm every pair that must be distinguished is a different gray; then emulate protanopia, deuteranopia and tritanopia in the browser's DevTools and look at every place color carries meaning.

Question: Is a triadic color scheme color-blind friendly?

Short answer: Usually, because 120° of hue separation is large — provided the three colors are also staggered in lightness and the triad does not rest on a red-green pair. A blue-led triad is the safest; a red-led one needs a second channel.