Accessible Color for Data Visualization

A chart's color-coding has to do more work under worse conditions than almost any other UI element: distinguish five, eight, sometimes a dozen categories, often at small mark sizes, often for a reader with some form of color vision deficiency, and sometimes reproduced in grayscale on an office printer with none of the original hues surviving at all. Treating chart color as a late-stage styling pass rather than a structural design constraint is where most inaccessible charts come from.

Three different chart-color problems, not one

Categorical (qualitative) palettes — distinct, unordered categories like product lines or regions — need colors that are each maximally distinguishable from every other, with no implied order between them. Sequential palettes — a single metric ranging low to high, like population density on a map — need one continuous, monotonically increasing (or decreasing) visual progression, usually in lightness, so a reader can order values just by looking. Diverging palettes — a metric with a meaningful midpoint, like temperature anomaly above/below a baseline — need two sequential ramps meeting at a neutral midpoint color, so both direction and magnitude read correctly. Using a categorical palette where a sequential one belongs (or vice versa) is a surprisingly common and entirely avoidable chart-accessibility bug, independent of any color-blindness concern.

Building a categorical palette that survives color-blind readers

The core problem with categorical chart palettes is that they often need more distinct colors than can be reliably told apart by a color-blind reader using hue alone — a legend with eight hues might collapse to three or four visually distinct groups under deuteranopia simulation. Two practical mitigations:

1. Vary lightness deliberately across categories, not just hue. A palette where every category sits at the same saturation and lightness, differing only in hue, is the worst case for color-blind readers, since hue is exactly the channel CVD impairs. Spreading categories across a real lightness range (checked via the contrast checker or simply by converting each candidate color and comparing relative luminance) keeps categories separable through a channel CVD doesn't affect.
2. Simulate the actual palette, not a generic one. Run your specific category colors through the color blindness simulator for protanopia, deuteranopia, and tritanopia, and check which pairs of categories become hard to tell apart in each simulation — then swap the specific colliding pair, rather than redesigning the whole palette. The full reasoning behind why this simulation-based check is necessary (rather than relying on a reviewer's own unaffected color vision) is in designing for color blindness.

Beyond eight or so categories, no color palette alone reliably survives color-blind readers or grayscale printing — at that point, pattern fills, direct labeling, or splitting into small multiples (several simpler charts instead of one dense one) genuinely outperform adding more distinct hues.

Sequential and diverging palettes: lightness carries the meaning

For a sequential ramp, lightness should do most of the actual work of conveying "low to high," with hue mostly constant or shifting only slightly — a single-hue ramp from light to dark (generated with the shades, tints & tones generator) reads correctly in grayscale and under any form of color vision deficiency, because the ordering signal lives in lightness, not hue. A common mistake is a "rainbow" sequential scale (the classic red-to-violet spectrum used as a value ramp) — it looks vivid, but it has no consistent lightness ordering, so a reader can't reliably tell which end is "high" without checking the legend every time, and it fails almost completely under any red-green color vision deficiency.

For diverging palettes, the same logic applies to both halves independently — light-to-dark in one hue direction from the midpoint, light-to-dark in a different hue in the other direction, with the neutral midpoint genuinely neutral (low saturation, mid lightness) rather than accidentally reading as belonging to one side or the other.

Never let color alone carry a categorical distinction on a chart

Every principle from general UI color accessibility applies with more force on charts: pair color with a second channel wherever the mark size allows it — a distinct marker shape per category on a scatter plot, a distinct line style (solid/dashed/dotted) per series on a line chart, direct end-of-line labels instead of a separate legend requiring color-matching at a distance. Direct labeling in particular removes the color-matching step entirely for any reader, color-blind or not — it's frequently the single highest-leverage accessibility improvement available for a chart, and it's usually cheaper to implement than a genuinely bespoke colorblind-safe categorical palette.

Grayscale as a practical sanity check

Converting a finished chart to grayscale (most image editors and browser dev tools can do this with a filter) is a fast, low-effort test that surfaces two separate problems at once: it approximates roughly what a reader with total color blindness (achromatopsia, rare but real) sees, and it's a direct check against literal print reproduction where color genuinely doesn't survive at all. If categories or ramp direction remain distinguishable in grayscale, the underlying lightness structure is doing its job; if they collapse into indistinguishable gray, hue was carrying meaning that lightness should have carried instead.

A concrete categorical-palette example

Consider a five-category chart tracking usage across product tiers, where a first-pass palette picks five hues evenly spaced around the wheel at identical saturation and lightness — effectively a triadic-style rotation extended to five stops, generated the way the color harmonies tool would produce a triadic set, just with more stops. This looks balanced and vivid in isolation, but under deuteranopia simulation two of the five (typically a red-leaning and a green-leaning hue at similar lightness) tend to converge toward the same muddy yellow-brown, collapsing an intended five-way distinction into an effective four-way one. The fix isn't necessarily abandoning the hue-rotation approach — it's checking the specific rotated set against a simulator and deliberately relightening or redarkening the one or two categories that collide, rather than assuming even hue spacing alone guarantees separability.

Choosing chart color before choosing chart type, not after

One structural habit that prevents most of the problems above: decide whether a given chart is fundamentally categorical, sequential, or diverging before picking any colors at all, and let that decision constrain the palette-building approach from the start. A stacked bar chart comparing five unrelated product categories needs a categorical palette; a choropleth map of a single continuous metric needs a sequential one; a chart of year-over-year change needs a diverging one. Retrofitting color onto an already-built chart without first naming which of the three problems it actually represents is how a sequential metric ends up rendered with an unordered rainbow categorical palette, or a five-category comparison ends up using a light-to-dark ramp that implies an ordering none of the categories actually have.