U4.06.5Semantic colour needs a text label to be judged on its owndesign

A red block still needs the word overdue next to it before its color means anything specific

Aliases: semantic colour labelling · colour-plus-text

What it is

A semantic colour expresses "what kind of thing this is," but the concrete judgement of that kind must be completed by text present at the same spot: the red block needs "Overdue" beside it, the green badge needs "Completed" on it, the legend's semantic swatches need names. The reason: semantic colour conveys one category slot, and what fills the slot (danger? heat? brand?) is decided by context and text — a semantic colour stripped of text can only be guessed at, using whatever library of associations the reader happens to carry, with an uncontrolled error rate.

Why it happens

Reading a semantic colour is two-stage: first an automatic association (red → danger slot), then concretisation (does this "danger" mean overdue, overspent, or down?). The first stage is fast and unreliable; the second runs on text and requires the text to be present. Without it, readers fill the slot with colour plus common sense, and the association's spread is enormous — red can point at a dozen judgements — so the filling direction depends entirely on the reader's most recently trained context, which is why the same red icon reads "overspend" to a finance user and "outage" to an operations user. Text on the spot turns the second stage from guessing into reading, and only then is the judgement unique.

Where it stops holding

Not every semantic use of colour needs text: deeply entrenched interface conventions (a red X for close, green for in-progress) are broadly trained, and text can be spared. Dashboards that switch context frequently, charts aimed at new users, and cross-cultural products must keep the words. Nor may text and colour substitute for each other — the word "status" without colour loses preattentive search efficiency; colour without wording is unreliable. When both are present there is a consistency requirement: if the text says "Completed" while the colour is amber, readers trust the word, and the colour must be fixed immediately — the mismatch itself is a defect to catch.

Applying it

  • Pair-check every semantic colour use: is a text label present at that spot and consistent with the colour's meaning; if absent, add it.
  • Legend semantic swatches always carry names — never "red/green" as the name; write "Overspend/Normal," because a colour cannot explain itself.
  • Verification: replace every semantic colour in the interface with grey and ask readers to judge status from the remaining text alone; complete judgements prove the text is self-sufficient, and with colour restored the two channels should corroborate each other rather than operate independently.

Related

  • Same group: U4.06.1 Semantic colours override the palette's neutral meaning · U4.06.2 Semantic direction varies by culture and industry; up/down colouring is the example · U4.06.3 Semantic and categorical colour need separate territories in one interface · U4.06.4 Brand colours entering the data palette break perceptual uniformity
  • Nearby: U4.05.4 Colour-only status cues fail accessibility requirements · U4.05.2 Lightness, shape, pattern, and direct labels are colour's main substitutes
  • Search terms: semantic colour labelling · legend naming · colour text pairing

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U4.06.5