Colour & Accessibility
P14.chart-craft.04 · Audience: guest, it-ml, language-pro · Prerequisites: Visual Encodings — What the Eye Ranks Well
Colour is the most misused channel on a chart. It is the lowest rung of the perception ranking — the eye reads it only coarsely — yet designers reach for it first, because it is the easiest thing to change and the most fun to pick. Two problems follow. The first is using the wrong kind of colour for the data: painting an ordered quantity in a rainbow, or unordered categories in a single fading hue, so the palette implies a structure the data does not have. The second is quieter and more common: choosing colours that a colour-blind reader — roughly one man in twelve — cannot tell apart, so a chart that works in the design review falls apart for a large slice of its audience. This module fixes both: match the palette family to the data's structure, then check that the palette survives colour vision deficiency before you ship it.
Before choosing colours, ask what kind of quantity they must carry, because colour palettes come in three families and each encodes a different data structure. Use the wrong family and the palette makes a claim about the data that is not true — a claim readers absorb without noticing, because they read the palette's structure as the data's.
| Family | Data it fits | Looks like | Example |
|---|---|---|---|
| Categorical | unordered groups | distinct hues, similar lightness | regions, product lines |
| Sequential | ordered magnitude, one direction | one hue, light → dark | population density, revenue |
| Diverging | ordered, with a meaningful midpoint | two hues meeting at a neutral centre | profit vs loss, change from a target |
ⓘ Concept: The palette family is a claim about the data's structure
Why it matters — A reader infers order from a palette automatically: a light-to-dark ramp says 'these values are ranked and the dark end is more', while a set of distinct hues says 'these are separate, unrankable groups'. So choosing the family is choosing what to tell the reader about the data before they read a single value. A rainbow applied to an ordered quantity is the classic error — it has no perceptual order, so equal steps in the data land as jarring, unequal jumps in colour, and the reader cannot tell which end is 'more'. A single sequential hue applied to unordered categories is the opposite error, implying a ranking that does not exist. Match the family to the structure and the palette reinforces the truth; mismatch it and the colour argues against the data.
Going deeper (technical) — how palette validation actually computes a collision
For the it-ml track: the panel's "safe under this CVD?" verdict is a small, concrete pipeline, and it is worth seeing the arithmetic so you know what a real validator does and where the panel's version is deliberately simplified.
1 — Simulate the deficiency with a linear matrix. Each swatch is a colour
(r, g, b). A CVD is approximated as a 3×3 linear transform applied to that
vector — the Brettel/Viénot family of matrices. For deuteranopia (green-weak),
for instance, the simulated colour is roughly
r' = 0.625·r + 0.375·g, g' = 0.700·r + 0.300·g, b' = 0.300·g + 0.700·b,
which collapses the red and green axes toward one another — exactly the confusion the deficiency produces. Protanopia and tritanopia use their own matrices. Multiply every palette colour by the matrix and you have the palette as the reader sees it.
2 — Measure the distance between every pair. For each pair of simulated colours
the panel computes a Euclidean distance in RGB,
d = sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²), and flags the pair as a collision when
d falls below a threshold (the panel uses 40). Two colours closer than the
threshold are treated as indistinguishable for that reader.
3 — Why a real validator does better. Euclidean distance in RGB is a rough proxy, because RGB is not perceptually uniform — equal numeric steps are not equal perceived differences. Production tools convert to a perceptual space (CIELAB) and compute a delta-E (ΔE), most rigorously CIEDE2000, which is engineered so that a fixed ΔE means the same perceived difference anywhere in colour space; a common rule of thumb is that ΔE below ~2.3 is imperceptible. The panel's RGB distance with a threshold of 40 is a legible stand-in for that ΔE test — same idea (simulate, then measure a distance, then threshold), simpler maths. The upshot for practice is identical: build the palette, push every colour through the deficiency matrices, measure the pairwise distances, and reject any palette with a pair below threshold.
Ask the mentor about this module
Ask a question about this content. The mentor explains and grounds its answer in what you are studying; asking is recorded as a learning signal, not a grade.
Try it yourself
A scratch console for this page's ideas — ungraded, nothing you run here is recorded.
Scratch console
A scratch console with the scientific stack (pandas, numpy, scikit-learn). Runs on the server — no network, resource-limited and measured.
Output appears here.
Where next?
Later in Chart Craft