{"slug":"semantic-colour","meta":{"title":"Semantic Colour","slug":"semantic-colour","kind":"grammar","summary":"Neutral is the default and colour is an exception that carries exactly one meaning — at most three semantic hues plus greys, and never colour on its own.","problem":"Colour gets used for decoration, for identity, for status and for hierarchy at the same time, so a hue means different things in different places. At that point colour has stopped carrying information and is only costing attention.","family":["scan"],"principles":["consistency","progressive-disclosure"],"status":"stable","visibility":"public","related":[{"title":"Color, Icons, and Contrast","url":"/cookbook/color-icons-and-contrast","summary":"The full authority on this — contrast floors, the channel rule, the entity palette. Read it before deciding anything."},{"title":"Badge Soup","url":"/patterns/badge-soup","summary":"What happens when this budget is ignored."}]},"body":"\u003e The authoritative version of these rules — including the contrast floors and\n\u003e the entity palette — is the **[Color, Icons, and\n\u003e Contrast](/cookbook/color-icons-and-contrast)** guide. This page is the\n\u003e catalog's summary of it, not a second source.\n\n## The budget\n\n**At most three semantic colours plus neutrals**, each with exactly one meaning,\nwritten down:\n\n| Colour | Means | Used for |\n|---|---|---|\n| **Amber** | a human must act, now | waiting, overdue, unsent, needs review |\n| **Rose / red** | broken or destructive | errors, failures, delete |\n| **Emerald** | moving the right way | positive deltas, success |\n| **Blue** | interactive | links and buttons **only** — never a status |\n| **Slate / grey** | everything informational | all other text, chips, borders |\n\nIf you cannot say in one short sentence what a colour means on this screen, make\nit grey.\n\n## The three rules that do the work\n\n**1. Neutral by default.** Colour is preattentive — the eye spends it before\nreading a word — which makes it powerful and strictly limited. Most facts on\nmost screens are informational, and informational is grey.\n\n**2. One meaning per hue, product-wide.** A colour that means \"draft\" on one\nscreen and \"re-opened\" on another has stopped being information. This is the\nrule that decays first, because each violation is introduced by a different\nperson on a different page.\n\n**3. Never colour alone.** Every coloured thing carries a second channel — a\nword, an icon, an arrow, a sign, or position. Print the page in greyscale: every\nvalue must still read. This is not only an accessibility floor, though it is\nthat; it is also what makes the screen survive a screenshot in a document, a\nprojector, and a phone in sunlight.\n\n## The channel rule\n\n**Marks carry identity; text and icons carry status.** In a chart, colour\nidentifies the series. In a table, colour indicates that something needs\nattention. Mixing the two — a status colour on a chart mark, an identity colour\non a badge — is a *channel collision*, and the reader cannot tell which system\nis speaking.\n\n## Contrast is part of the meaning\n\nA colour that fails contrast has not conveyed anything. The floors: **4.5:1** for\nnormal text, **3:1** for large text, and **3:1** for icons, chart marks and\ncomponent boundaries that carry meaning. The last one is the one most often\nbroken — a pale grey bar on a white card fails, and a pastel status dot conveys\nnothing to a substantial share of readers.\n\n## The failure modes\n\n- **Rainbow status.** Six hues at one saturation, some meaning two things.\n- **Colour-only delta.** Green and red numbers with no arrow or sign.\n- **Naked icon.** An icon with no label carrying meaning by itself.\n- **Channel collision.** Status colour on identity marks, or the reverse.\n- **Pastel marks** that fail the 3:1 floor and look deliberate.\n- **Hue in the view.** Colours hard-coded into templates rather than named by\n  role, so nobody can find or change the meaning later.\n\n## The test\n\nSquint at the screen. A well-coloured page shows a few points of colour exactly\nwhere attention is needed, and grey everywhere else. Then take a greyscale\nscreenshot: if anything became unreadable or ambiguous, colour was carrying that\nmeaning alone.\n"}