Lesson 3 of 4
Colour – Information, not decoration
Forget the colour wheel and "blue means trust". What matters in interface colour is legibility you can measure, meaning applied consistently, and proportion – one dominant, one accent, spent where it counts.
Colour is where interface design carries the most folklore, so this lesson starts by clearing the decks: in serious UI work, colour is not a mood board and not a persuasion lever. It’s a channel for information – and like any channel, it works when the signal is consistent and fails when it’s noise.
Colour with a job
The load-bearing idea is semantic colour: every colour is applied through a role – surface, primary text, accent, danger – rather than picked per screen. Red always means something’s wrong. Green always means something succeeded. The accent always means “this is the action”. Once colour keeps promises like that, users read it without thinking; break the promises and colour becomes decoration with a rulebook nobody can learn.
Colour with a job vs colour as mood
Same palette, different assignment
Roles are also why dark mode works: components reference text-primary and surface, each role holds a light value and a dark value, and the whole product flips without anyone re-picking a single colour. You’ll see this site’s actual role table, live, at /system.
Proportion: the 60-30-10 instinct
The 60-30-10 rule – 60% dominant colour, 30% supporting, 10% accent – is a borrowed interior-design heuristic, and the exact numbers don’t matter. The instinct underneath does: one quiet dominant (in current practice, near-white or near-black), and one accent spent only on what deserves attention. Linear is the canonical demonstration – near-black canvas, grey text, one lavender-blue accent doing every “look here” job in the product. When a screen feels noisy, count who’s holding a microphone.
Contrast: the measurable layer
Whether text is readable against its background isn’t an opinion – it’s arithmetic. The contrast ratio runs from 1:1 to 21:1, and WCAG 2.2 sets the floors: 4.5:1 for normal text, 3:1 for large text and meaningful non-text elements (icons, input borders). Those thresholds were chosen to compensate for the vision typical of an 80-year-old plus common colour-vision deficiencies – accessibility maths, not aesthetic preference.
Check a pair
Defaults are this page's own colours
Normal text: most of what an interface says, at the size it usually says it.
Large text carries further on less contrast.
One live controversy worth carrying into meetings: a newer algorithm, APCA, is more perceptually accurate (WCAG 2’s formula misbehaves near the dark end) – but it was pulled from the WCAG 3 draft in 2023, and WCAG 2.2 remains the only standard with legal force (ADA litigation, the EU Accessibility Act). If anyone proposes shipping colours that pass APCA but fail WCAG 2, that’s a legal-risk decision wearing a style-decision costume. Flag it as such.
The folklore, sized honestly
“Blue builds trust.” “Orange creates urgency.” A 2025 systematic review (Jonauskaite & Mohr – 132 studies, 42,266 participants, 64 countries, 128 years of research) found colour–emotion associations are real: people do link yellow with joy in context-free lab settings. What has never been established is the jump from association to behaviour – that a yellow button makes anyone buy. The entire colour-psychology-in-marketing industry lives in that unproven gap.
The working posture: colour choice is a brand-fit decision, not a persuasion lever with a lookup table. And any suspiciously quotable statistic – “colour increases brand recognition by 80%” is the classic, traceable to a 2005 marketing leaflet and debunked repeatedly – deserves the same scepticism you’d give a too-good conversion metric.
This page practises it:Every colour on this page arrives through a role – surface, text, accent, status – never as a raw value; the contrast checker below wakes up holding this page's own text-and-background pair, already passing the bar it teaches.