learn-dataviz-with-phoebe / Session 4 of 6
Learn Data Visualization with Phoebe · Session 4 of 6

Colour that works

Colour is where charts are usually decided and it is the part of this discipline with the least judgement in it. Whether two series can be told apart by a colour-blind reader is arithmetic. Whether a label is readable is arithmetic. The only genuinely creative decision is which of four jobs the colour is doing, and once that is named, everything downstream follows. Tonight: the four jobs, one rule each, and a real dichromacy transform showing two hues that sit 22.9 apart for you sitting 9.5 apart for somebody else.

🟡 Medium Bring a palette - yours, your product's, or your tool's default The bench is back, on the palette strip 45 min
0-3 · Welcome 3-18 · Four jobs, and one series one colour 18-40 · Build-along: measure a palette 40-45 · Q&A
Part 0

Where we are

Session 3 made the geometry checkable. Tonight does the same to colour, and the headline is the same: the colour part is computable, so compute it. Never decide by looking whether a palette is colour-blind safe.

🎫 Clear all three quiz questions to stamp your passport Live = presented in the 45 minutes Self-study = the full depth, after class

★ What you walk out with tonight. Your palette measured under three vision types, one chart's hues cut from four to one, and a second channel added wherever colour was carrying meaning alone.

Part 1 · covers the four jobs

Four jobs, and one rule for each

6 min live

Almost every colour mistake in a chart is a job mismatch: a categorical palette used for magnitude, or a rainbow used for anything at all.

Categorical · identity A fixed hue order, never cycled. Colour follows the entity, not its rank. Mistake: a filter changes the series count and everything repaints Sequential · magnitude One hue, light to dark. That is all. Mistake: a rainbow, which has no order anybody can read, and invents boundaries where the data is smooth Diverging · polarity Two hues, with a neutral grey midpoint at the value that actually means zero. Mistake: a hue at the midpoint, or a midpoint that is not the meaningful zero Status · state Good, warning, serious, critical. Reserved - never reused as "series 4". Mistake: shipped as colour alone, with no icon and no label beside it
🔍 Click to zoom - name the job, and the rule is already decided
LiveOne series, one colour4 min▶

Four bars showing revenue for four roasts is one series. It is one measure, measured four times. Giving each bar its own hue is colour-by-rank, and it is probably the most widespread colour mistake in business charts because every spreadsheet tool does it by default.

What it costs:

  • It implies a distinction that is not in the data. The reader looks for what the blue ones have in common. There is nothing.
  • It spends your categorical palette on a chart that needed none of it, so when a genuinely categorical chart appears next to it, the same hues now mean something else.
  • It makes the legend necessary where a direct label would have done, and legends are a matching exercise.

The rule: colour encodes a difference that exists in the data. If the only difference between your bars is their value, the value is already encoded - by length - and colour has nothing left to do. One hue, and spend the attention on the labels.

That pair is one of the bench's own series colours against a white surface: it comes out around 2.1 to 1, below the 3:1 floor. That is not a reason to reject the hue - it is a reason it must carry a direct label rather than relying on a legend, which is precisely what the bench's chart does. A contrast warning is an obligation, not a veto.

Part 2 · covers colour vision

Compute it, do not judge it

6 min live

Roughly one man in twelve has some form of colour-vision deficiency. You cannot check for it by looking, because you are not the person who cannot see it - and the check is a matrix multiplication that takes a millisecond.

Vision Worst adjacent pair, ΔE Reading Normal 22.9 comfortable Tritanopia 23.1 comfortable Deuteranopia 10.0 above the floor, visibly compressed Protanopia 9.5 above the floor, and the closest call Two hues, 22.9 apart for most readers, 9.5 apart for a protanope. The floor is 8, so this palette passes - narrowly, on two of four vision types. That margin is the entire argument for a second channel, and it is invisible unless somebody computes it.
🔍 Click to zoom - measured by the same bench, on the palette strip, in the browser
LiveNever meaning in hue alone4 min▶

Even a palette that passes needs a second channel, for four reasons that have nothing to do with each other:

  • Colour vision. The measured case above.
  • Print. Somebody will print it in greyscale, and hue collapses to lightness.
  • Forced colours. High-contrast operating-system modes replace your palette entirely.
  • Projection. A dim projector in a bright room flattens everything, and you will be standing next to it.

The second channels, in order of how cheap they are: a direct label (free, and better than a legend anyway), position (a sorted order the reader can rely on), texture (a hatch at 45 degrees), and shape for point marks.

The status-colour rule

Good, warning, serious, critical are reserved and always ship with an icon and a word. A red dot on its own is meaningless to a protanope, in greyscale, and to anybody who has not learnt your convention - which is most people, most of the time.

Self-studySequential and diverging, properly4 min▶
  • Sequential is one hue, light to dark. Lightness carries the magnitude, which is why it survives greyscale and colour blindness for free. A two-hue "sequential" ramp is a diverging palette that has not admitted it.
  • Never a rainbow for magnitude. It has no order anybody can read without a legend, it invents visible boundaries where the data is smooth, and the yellow band reads as a peak wherever it lands. It persists because it looks like more information.
  • Diverging is two hues plus a neutral, and the neutral must sit at the value that genuinely means zero - break-even, no change, the target. A diverging palette centred on the mean of your data is telling a story about your sample, not about the world.
  • Check the number of steps. Beyond about seven, people cannot map a colour back to a bin. If you need more resolution than that, you need a different form or a tooltip.
Build-along

Measure a real palette

★ 22 min · everyone builds

Go back to the bench in session 3 for the vision modes and the palette strip - it is the same widget and the same measurements. Tonight you point them at your own colours.

Name the job. For each use of colour in your chart: identity, magnitude, polarity or state. If you cannot name one, the colour is decoration and it should go.

Cut the hues. One series gets one colour. Count how many charts in your deck are using four hues to say one thing.

Measure. Contrast against your actual surface, and separation under deuteranopia and protanopia. Never judge this by looking.

Second channel. Wherever colour carries meaning, add a label, a position, a texture or a shape. Cheapest first: direct labels are free and better than a legend.

Reserve status. Good, warning, serious, critical are not available as series colours. Take them out of the categorical set and give them an icon and a word.

Open the bench in session 3 and cycle the four vision modes. Watch the palette strip converge and the ΔE drop from 22.9 to about 10. That is a validated palette behaving well - a bad one collapses to single digits.

Run your own two closest hues through the contrast checker above. Text against your real surface, not against white if your surface is not white.

Find a chart of yours using four hues for one measure. Change it to one hue and look at the two versions side by side. Most people find the single-hue version looks more professional, which is a pleasant surprise given it was also the correct one.

Find a rainbow. A heatmap, a map, a risk matrix. Replace it with one hue light-to-dark and check whether anything was lost. It will not have been.

Find a diverging palette and check its midpoint. Is the neutral at the value that genuinely means zero, or at the middle of the data range? The second one is extremely common and it makes the chart a story about your sample.

Add one second channel. Pick the chart where colour is doing the most work and give it direct labels. Then remove the legend, and notice the chart got simpler.

Audit your status colours. Are any of them also serving as series colours anywhere? If so, red means two things in your product and one of them is an emergency.

If you take one thing from tonight. Never decide by looking whether a palette is colour-blind safe. You are structurally the wrong person to judge it, the check is a matrix multiplication, and the bench does it in a millisecond.

Homework

Before session 5

25 min
  1. Measure your team's palette under deuteranopia and protanopia. Write the worst adjacent pair down and share it.
  2. Convert one four-hue chart to one hue. Compare side by side.
  3. Kill one rainbow. Replace with one hue, light to dark.
  4. Add a second channel to one chart where colour was carrying meaning alone.
  5. Bring a busy chart to session 5 - lots of gridlines, a legend, labels on every point. Session 5 is about taking things away.
Check yourself

Three questions

Clear all three and session 4 gets stamped in your passport.

1 · Four bars show revenue for four roasts. How many colours?

The only thing distinguishing the bars is their value, and the value is already encoded by length. Four hues imply a categorical distinction that does not exist, spend the categorical palette on a chart that needed none of it, and force a legend where a direct label would do.

2 · Your palette measures ΔE 22.9 under normal vision and 9.5 under protanopia. What does that mean?

9.5 clears the floor of 8, so the palette is usable. It is also less than half the separation most readers get, which is exactly the situation where a direct label or a texture costs nothing and removes the risk. And roughly one man in twelve has some form of CVD, which is not a rounding error.

3 · Why is a rainbow palette wrong for magnitude?

Magnitude needs an ordered channel, and lightness is one - which is why sequential is a single hue from light to dark. Hue is not ordered: nobody can say whether green is more than orange without checking. The yellow band also reads as a peak wherever it happens to fall.

Sources covered

What this session teaches, and where it came from

✓The four jobs of colourCategorical, sequential, diverging, status - with the rule and the characteristic mistake for each
✓One series, one colourFour hues for four bars of one measure is colour-by-rank, and it is the default in every spreadsheet tool
✓Colour-vision deficiency, measuredA real dichromacy matrix and an OKLab distance: 22.9 normal, 23.1 tritan, 10.0 deutan, 9.5 protan on the course palette
✓Contrast as an obligation, not a vetoA slot below 3:1 must carry a direct label or a table view, which the bench's chart does
✓Never meaning in hue aloneFour independent reasons - vision, print, forced colours, projection - and the second channels in order of cheapness
✓Sequential and diverging done properlyOne hue light to dark; two hues plus a neutral at the value that genuinely means zero; never a rainbow; about seven steps maximum
◐Colour theory as aestheticsThis session treats colour as an encoding. Brand palettes and visual identity live in Phoebe's design-partner skills

The palette's full validation report - lightness band, chroma floor, CVD separation, normal-vision floor and the contrast warning - is in the course's source map.

Session 4 cheat sheet · pin this

Name the job firstIdentity · magnitude · polarity · state. No job means it is decoration.
One series, one colourIf the only difference is the value, length already encoded it.
Compute, never judgeYou are structurally the wrong person to eyeball a CVD check.
Sequential is one hueLight to dark. Lightness survives greyscale and CVD for free.
Diverging needs a real zeroNeutral at break-even, not at the middle of your sample.
Always a second channelLabel, position, texture, shape. Vision, print, forced colours, projectors.