Guide

How to Choose Accessible Color Palettes for Your UI (2026 Guide)

ZA

Zakaria Amzdak

Jul 25, 2025 · Updated Jul 18, 2026 · 9 min read

Most color palettes fail for color blind users for a single reason: two colors that mean different things are told apart by hue alone. When that hue difference disappears — and for a red-green color blind user, a lot of it does — the two colors collapse into the same muddy tone. The fix is easier than it sounds. Pick colors that also differ in how light or dark they are, avoid a few known-bad pairs, and test the result. This guide walks through how to choose an accessible palette, which combinations to steer clear of, the color-blind-safe sets worth reusing, and how to repair a palette that's already failing.

Who you're designing for

About 300 million people worldwide have some form of color vision deficiency — roughly 1 in 12 men and 1 in 200 women. It's almost always inherited, carried on the X chromosome as a recessive trait, which is why it shows up far more often in men. There's no cure for the inherited kind, so the burden of making things work sits with the design.

• Red-green is by far the most common. Deuteranomaly — a shifted, weaker green response — is the single most common type. Full deuteranopia and the red-side protan types round out the group.
• Blue-yellow (tritan) deficiency is rare, and unlike red-green it isn't sex-linked, so it affects men and women about equally.
• Monochromacy — seeing no color at all — is very rare. Most people described as “color blind” still see plenty of color; they just confuse specific ranges.

The practical takeaway: you're not designing for people who see gray. You're designing for people who lose the ability to separate certain hues — most often reds from greens. A palette that survives that loss works for nearly everyone.

Vary lightness, not just hue

Here's the core idea, and it's worth internalizing: color blindness mostly flattens hue, but it leaves lightnessintact. A protanope or deuteranope who can't tell your red apart from your green can still tell dark from light with normal precision. So if your two colors differ in lightness, that difference carries through even when the hue difference vanishes.

Try this the next time you check a palette: convert it to grayscale. If two swatches turn into nearly the same shade of gray, they're relying on hue alone and will be a problem. If they stay clearly different grays, they'll hold up. A pure red (#FF0000) and a pure green (#00FF00) are a famous failure here — they read as almost the same mid-gray, which is exactly why they merge under deuteranopia. Push one darker (a deep maroon) and the other lighter (a bright yellow-green) and the pair separates again, in grayscale and for everyone.

This is why lightness is the property to lean on. Hue makes a palette look good; lightness makes it readablewhen hue can't be trusted. When you're building a set of colors that need to be told apart — chart series, status badges, categories on a map — spread them across a range of lightness first, then adjust hue for polish.

WCAG contrast, in plain terms

Contrast ratio measures the difference in luminance (perceived brightness) between two colors, on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines set the thresholds most teams design to:

• WCAG 1.4.3 (Contrast, Minimum): normal text needs at least 4.5:1 against its background; large text (about 18pt, or 14pt bold) needs 3:1. (W3C)
• WCAG 1.4.11 (Non-text Contrast): interactive components (button borders, form fields, focus states) and meaningful graphics like icons or chart lines need at least 3:1 against what's around them. (W3C)
• WCAG 1.4.1 (Use of Color): color can't be the only way you convey information or tell elements apart — there has to be a second cue. (W3C)

Contrast and color blindness are related but not the same check. Two colors can pass a contrast ratio against a white background and still be indistinguishable from each other for a color blind user — a medium red and a medium green are the textbook case. That's why you test both: a contrast checker for text legibility, and a simulator for whether your colors stay distinct. Use the Palette Checker or the WebAIM Contrast Checker for the numbers.

Color pairs to avoid

A few combinations come up again and again in accessibility reviews. In each case the two colors sit close in both hue and lightness, so the deficiency erases the one difference that was doing the work. You don't have to retire these colors — just don't make them the onlything separating two meanings, and don't place them edge to edge as the sole cue.

• Red / green: the number-one problem, because red-green deficiencies are the most common. A red “error” and a green “success” can turn into the same brownish tone. If you keep them, add an icon or label, or split them by lightness.
• Green / brown: brown is essentially a dark, desaturated orange-red, so it drifts toward green for protan and deutan viewers. Common in maps and charts.
• Blue / purple: purple is blue plus red; remove the red channel and it slides toward plain blue. A risk for both red-green and blue-yellow deficiencies.
• Light green / yellow: these already sit close in hue and are both light, so there's almost no lightness gap to fall back on. One of the easiest pairs to accidentally merge.

Safer swaps usually involve the blue-orange axis, which every common deficiency preserves reasonably well. Blue paired with orange, or dark blue paired with a light tan or yellow, tends to stay distinct across protan, deutan, and tritan views — and it also keeps a healthy lightness gap.

Color-blind-safe palettes for data

For charts, maps, and anything with several categories, you don't have to invent a safe palette from scratch. A couple of well-known sets were built and tested specifically to stay distinct under color vision deficiency, and reusing them saves a lot of trial and error.

• The Okabe-Ito palette is an eight-color qualitative set designed to be distinguishable for the common deficiency types. It's a go-to for scientific figures and is built into tools like R and matplotlib. The colors are deliberately spread across hue and lightness, which is why it holds together.
• ColorBrewer's color-blind-safe schemes let you filter its sequential, diverging, and qualitative palettes down to the ones flagged safe for color blindness. It's aimed at maps and data viz, and the safe-only filter takes the guesswork out.

Two limits worth knowing. First, categorical safe palettes top out around eight colors — beyond that, even the best sets start to blur, for everyone. If you need more categories, group them, label series directly, or rethink the chart. Second, “color-blind-safe” means the colors stay distinct; it doesn't guarantee text drawn in those colors meets contrast. Check that separately.

How to fix a failing palette

Say you run your palette through a simulator and two colors merge under deuteranopia. Here's the order of operations that fixes it fastest:

1. Spread them in lightness first. Take one of the two colors and make it clearly darker or lighter. This is the highest-leverage move because lightness survives the deficiency intact — often it's all you need.
2. Shift hue toward the blue-orange axis. If they still collide, nudge one color toward blue or orange rather than leaving both in the red-green zone. That axis stays legible where red-green doesn't.
3. Add a non-color cue. When color alone can't carry the difference — or you've run out of distinct colors — add a second channel: a pattern or texture fill, a distinct shape, an icon, or a direct text label. This is what WCAG 1.4.1 is really asking for.
4. Re-test after each change. Change one thing, run the simulator again, and see whether the colors separated. Fixing several things at once makes it hard to know what actually worked.

Direct labeling deserves a special mention because it sidesteps the whole problem. A line chart that labels each line at its end, or a legend that puts the category name right on the swatch, stays readable no matter how the colors shift. Color becomes a nice-to-have rather than the only way in.

Tools for testing

Testing is quick once you know what each tool is for. Pair a color-blindness check with a contrast check — they catch different problems.

• Palette Checker: paste in a set of colors and see whether they stay distinct across deficiency types.
• Image Simulator: upload a screenshot of a chart or UI to see how it reads under each type.
• Website Checker: run a live URL through simulation for the common deficiency types.
• Live Webcam Simulator: check physical products, packaging, or printed material.
• WebAIM Contrast Checker: confirm text and UI elements meet the WCAG ratios.

A fast habit: after you pick a palette, view it in grayscale and run it through a simulator once during design review. Most color problems surface in under a minute, long before anything ships.

Frequently asked questions

The bottom line

An accessible palette isn't a separate palette — it's a normal one built with a couple of habits. Give colors that need to be told apart a real difference in lightness, not just hue. Steer clear of red/green, green/brown, blue/purple, and light-green/yellow as sole cues. Reuse a tested color-blind-safe set for charts instead of guessing. And when color can't carry the whole load, add a label, shape, or pattern. Then check your work with a simulator and a contrast tool. Do that and your colors work for the roughly 1 in 12 men and 1 in 200 women who see them differently — and they read more clearly for everyone else too.