Designing charts that work when colour fails
A few years ago at Peak I was running user research on a forecasting dashboard when a participant said something that changed how I build charts. “I can’t tell which line is which.” Then, quieter: “I usually rely on texture or pattern when colour fails me.”
Roughly 8% of men and 0.5% of women have some form of colour vision deficiency. If any of your charts use colour as the only way to distinguish series, 1 in 12 readers can’t read them. The fix isn’t a better palette. It’s a principle.
See it break
Below is a typical three-series chart: green, blue, amber. Click through the colour-vision modes and watch what happens. The shift animates through the matrix so you can see the colours merge, not just snap.
What chart readers with typical vision see.
Under deuteranopia the green and amber lines converge into near-identical mustard. Under protanopia the amber darkens until it competes with every other line for attention. Under tritanopia the blues and greens fuse. The legend doesn’t save you. The legend is colour too.
This is the argument. You can’t design your way out of it with a different palette. You have to add channels.
Stack channels until one failing doesn’t matter
The principle I landed on: no single channel should carry the entire meaning of a data series. Every series needs at least two visual handles, and ideally three or four.
Toggle the channels below. Each one animates onto the chart so you can feel the build-up, and read the caption to see how robust the chart becomes with each layer.
One channel: colour only. A colour-blind reader can’t tell these three lines apart.
Line style is the cheapest. Solid, dashed, dotted. Three series, three strokes. The dasharray animates in, letting the eye follow the change rather than just re-render.
Markers carry meaning at every data point. A circle, a square, a triangle. Shapes hold up even when the entire image is desaturated. They scale in with a spring, staggered across the chart so it feels like the data is landing.
Direct labels are the overkill option, and sometimes the right one. When a chart is going to be exported, screenshotted, emailed, printed in greyscale, or consumed on a projector, put the label on the line itself and the legend becomes optional.
The real work is political
The design is the easy part. The harder part is arguing that every chart in the company should ship with extra visual noise to serve a small fraction of readers.
The argument that worked: a chart that uses shape and colour still reads when you remove the colour. A chart that uses colour only does not. You’re not adding redundancy for accessibility. You’re adding resilience for the screenshot, the projection, the PDF, the photocopy, the eye fatigue at 4pm.
Once the design system adopts the default, the accessible version is what every new chart ships as. You stop doing accessibility work and start doing normal work.
A rule of thumb
Before signing off on a chart, screenshot it, open it, then drop a greyscale filter. If the series are still distinguishable, you’re done. If they aren’t, you’re one channel short.
Colour alone is never sufficient.