Colour
On the first visual draft of LunchLoop's Today card, the Change button, the locked label, the credit amount and the cook's name are all brand orange. Everything shouts, so nothing stands out. Worse, the locked and open states differ only by colour, so a subscriber who cannot tell orange from grey cannot tell whether they can still change lunch.
The rule
Give every colour a job, and never let colour work alone.
Colours get roles, not moods. A product palette is organised by what each colour does:
- Neutrals: backgrounds, body text, borders and dividers. Most of the screen.
- Primary (brand) colour: the main action and a few key highlights. Used sparingly.
- Semantic colours: success, warning, error and information, each meaning exactly one thing everywhere in the product.
A common starting balance is roughly 60/30/10: mostly neutrals, some secondary colour, a little accent. The accent keeps its pull only because it is rare.
Contrast keeps text readable. The WCAG accessibility guidelines, at level AA, ask for at least 4.5:1 contrast between normal-size text and its background, and 3:1 for large text and for the icons and control edges people need to see.
Colour never works alone. Roughly 1 in 12 men has some form of colour-vision deficiency, and bright sunlight on a phone screen washes out colour for everyone. So every state that colour signals also gets a word, an icon or a shape: a lock icon and the word "Locked", not just a grey tile.
One colour, one meaning. If green means "confirmed", it cannot also decorate a promotion banner.
The shortcut
Run the greyscale test: look at the screen with all colour removed. If the most important element still stands out and every state can still be told apart, colour is supporting the design rather than carrying it.
Assign roles
Orange means the primary action, and nothing else. Neutrals carry the meal name and the cook's name. Green means confirmed. Grey means locked.
Drills
Answer fast — trust the rule.
Under WCAG level AA, what is the minimum contrast for normal-size body text?
A form shows errors only by turning the field border red. What is the problem?
Why keep the brand accent to a small share of the screen?
LunchLoop uses green for "Confirmed" and also for a "Try our new dessert box" banner. What is wrong?
Remember
- Give every colour a job, and never let colour work alone.
- Shortcut: the greyscale test; the key element and every state must survive without colour.
- Trap: low-contrast brand colours on text, and states told apart by colour only.