Chart colours that survive colourblindness

Red-green colour vision deficiency affects roughly 8% of men, and red-green is exactly the convention financial charts depend on. You do not have to abandon it — you have to stop relying on it alone.

Add a second channel

Position, labels, direction and lightness are all channels that survive any form of colour blindness. A cost bar that points down and is labelled Cost stays readable even if its colour reads identically to the bar next to it.

Vary lightness, not just hue

A dark green against a light red remains distinguishable in greyscale. Two mid-tone colours of equal lightness collapse into the same grey, which is also what happens when someone prints your chart in black and white.

Use a tested palette

The Okabe-Ito set is the standard colourblind-safe palette for categorical data. It is not the prettiest set of eight colours, but it is the one that works for everyone.

The greyscale test

Screenshot the chart, desaturate it and look again. If you can still read it, the colour is carrying meaning rather than doing all the work. This takes ten seconds and catches almost every problem.

• Label directly on the element instead of using a legend.
• Pair every colour with a different lightness.
• Keep red and green apart in position where you can.
• Check in greyscale before publishing.

Accessible charts are not a separate design. They are the same chart with one redundancy added, and that redundancy tends to make them clearer for everyone.