STA-005
A chart palette that works for colourblind readers
Five colours separated by lightness as well as hue, so the chart still reads when the hues collapse — and a rule about never encoding meaning in colour alone.
Red and green next to each other is the classic mistake, and roughly one man in twelve cannot tell them apart. On a dashboard about money that is not a cosmetic problem.
The reliable approach is to separate colours by lightness as well as hue. If the palette still works printed in greyscale, it works for every form of colour vision deficiency, and it also survives being screenshotted into a document.
The stronger rule is that colour should never be the only carrier of meaning. Label the series, order them consistently, and put values in the tooltips.
// Ordered so that adjacent series differ in lightness, not only in hue.
// Checked against deuteranopia, protanopia and greyscale.
const CHART_COLORS = [
'#2E6FD6', // blue — lightness 45
'#D9822B', // orange — lightness 51
'#2AA4A4', // teal — lightness 40
'#B2589B', // magenta — lightness 52
'#F2B441', // amber — lightness 61
];
function chart_color(int $index): string
{
return CHART_COLORS[$index % count(CHART_COLORS)];
}
// Rough greyscale check: the perceived lightness of two adjacent series
// should differ by enough to be told apart with no hue at all.
function perceived_lightness(string $hex): float
{
[$r, $g, $b] = sscanf(ltrim($hex, '#'), '%2x%2x%2x');
return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b; // 0-255
}
function palette_is_distinguishable(array $colors, float $minDelta = 20.0): bool
{
for ($i = 1; $i < count($colors); $i++) {
if (abs(perceived_lightness($colors[$i]) - perceived_lightness($colors[$i - 1])) < $minDelta) {
return false;
}
}
return true;
}Using it
Keep the order fixed across every chart on the dashboard. If blue is always organic traffic, the reader learns it once.
On dark backgrounds these hold up, but raise the lightness of the blue and the teal. What breaks on dark is saturation, not hue.
Add a dashed stroke to the second series on line charts. Two carriers of meaning beats one at no cost.
What bites people
Do not pair red and green in the same chart, ever, and do not use red alone to mean bad. Pair it with a label or an icon.
Testing by squinting is not a substitute for the greyscale check. Run the numbers.