Color Blind Palette Generator

Think about the last chart, dashboard, or infographic you created. Now imagine that 8% of your male users and 0.5% of your female users might struggle to distinguish the colors you carefully chose. That's the reality of color vision deficiency—and exactly why accessible palettes matter.

A thoughtfully designed color palette ensures your message gets through regardless of how someone perceives color. This matters everywhere color carries meaning: data visualizations, status indicators, navigation systems, and beyond. Testing your palette early catches problems before they become expensive fixes—or worse, before they confuse your users.

This generator tests your palette against all four major types of color vision deficiency: protanopia, deuteranopia, tritanopia, and achromatopsia. The live simulation shows you exactly what users with each condition see—no guessing required. Meanwhile, the built-in contrast checker flags any combinations that don't meet WCAG standards.

The daltonization feature is particularly useful—it suggests adjusted colors that improve visibility for color blind users without throwing off your entire design. And with the context previews, you can see your colors in action on buttons, cards, and charts before committing to anything.

Vary lightness, not just hue

This is the one rule to keep if you keep only one. Two colors that differ in lightness stay distinguishable under every type of color vision deficiency, in greyscale printing, on a failing projector, and in direct sunlight. Two colors that differ only in hue can collapse into a single tone. A quick sanity check: convert your palette to greyscale, and if two swatches become the same grey, they are doing no work for a meaningful slice of your audience.

Reach for blue-orange before red-green

Red and green sit directly on the axis that the common deficiencies compress, which is why red-green pairings fail so reliably. Blue against orange is the pragmatic replacement: it stays separable for protan and deutan viewers, holds up in greyscale because the two differ in lightness as well as hue, and still reads as a strong, intentional contrast to everyone else.

Cap your categorical series

Beyond roughly six categories, no palette stays reliably distinguishable for anyone — color vision deficiency or not. Past that point the honest fix is structural rather than chromatic: label series directly on the plot, group smaller categories into an "other" bucket, or split one dense chart into several. Adding a seventh color mostly adds confusion.

Use palettes that have already done the work

You don't have to derive this from scratch. The Okabe-Ito palette is an eight-color qualitative set designed specifically for color-universal design and is a safe default for categorical data. ColorBrewer lets you filter its schemes for colorblind-safe options and is the standard reference for map and chart palettes. For continuous data, perceptually uniform ramps such as viridis are both CVD-friendly and monotonic in lightness.

Choose the right kind of scale

Match the scale to the data rather than to taste. Sequential data — anything running low to high — wants a single-hue or perceptually uniform ramp that climbs steadily in lightness. Diverging data with a meaningful midpoint wants two distinguishable hues meeting at a light neutral; blue-to-red or teal-to-brown work, red-to-green does not. And avoid rainbow or jet colormaps for quantitative work entirely: they introduce false boundaries where the hue shifts quickly, hide real differences where it shifts slowly, and lose their ordering completely under color vision deficiency.

Start by prioritizing contrast, and keep two separate rules straight, because they get conflated constantly. WCAG's 4.5:1 threshold (3:1 for large text) governs text against the background it sits on — it says nothing about how your palette colors relate to each other. What governs the palette itself is Success Criterion 1.4.11, which asks for 3:1 between adjacent graphical objects and the parts of UI components that carry meaning. So a chart's two neighbouring series need 3:1 from each other; a label printed on one of them needs 4.5:1 from that fill.

Don't rely on color alone — pair important color-coded information with patterns, icons, or labels as backup.

Run your palette through all the simulations before you finalize anything. Like a color? Lock it. Need to regenerate the rest? Go for it. Once you've landed on something that works across all vision types, export it in whatever format fits your workflow—CSS, Tailwind, JSON, you name it.