Anticode Open builder

Colour psychology in web design: what the evidence supports and what it doesn't

Colour psychology in web design is mostly folklore wrapped around a few real effects. Colours do carry associations, but they shift with culture, context and the individual, and there's no reliable evidence that a hue by itself makes people buy. What does change behaviour is contrast, consistency and whether a colour fits what visitors expect.

Updated · By the Anticode team

Where the popular claims come from

The charts that circulate online (blue means trust, red means urgency, green means growth, purple means creativity) mix together three different things: genuine research on colour and emotion, marketing lore repeated from one blog to another, and individual A/B tests generalised far beyond the page they were run on. Colour theory has a long history in painting, from Goethe's writing on colour to the Bauhaus teaching of Johannes Itten, but much of that tradition is about harmony and artistic effect rather than measured behaviour.

What holds up

  • Associations exist, and depend on context. People link colours with ideas, and some links are widely shared, such as red with alarm or heat. But the same red means danger on a warning sign, appetite on a food label and luck in a Chinese new year campaign.
  • Fit matters. Research on brand colour generally finds that colours perceived as appropriate for the product affect how the brand is judged. A colour that clashes with what the business is feels wrong, whatever the colour is.
  • Things that stand out get noticed. The isolation effect, often called the von Restorff effect, describes how an item that differs from its surroundings is more likely to be noticed and remembered. That's about difference, not about any particular hue.
  • Preferences are personal. Favourite colours vary by person, age and culture. Designing for one universal reaction ignores most of your visitors.

What doesn't hold up

“Red buttons convert better”
Individual tests where one colour beat another usually changed how much the button stood out against that particular page. Put a red button on a red page and it disappears.
“Blue builds trust”
Blue is common in finance and software, so it reads as familiar there. Familiarity isn't the same as trust, and a blue site with vague copy and no contact details won't be trusted.
“Yellow makes people anxious”
There's no consistent evidence. Yellow is hard to use for text because of its low contrast on white, which is a legibility problem, not a psychological one.
Precise percentages
Claims that a colour lifts sales by a specific percentage are almost always untraceable or from a single test on a single site.

What matters more than hue

  1. Contrast. Text and controls people can't read don't persuade anyone. WCAG 2.2 asks for 4.5:1 for normal text and 3:1 for the boundaries of controls at level AA.
  2. Consistency. If the colour of the main action is the same everywhere, visitors learn what to click. If every section has a new accent, nothing stands out.
  3. Scarcity. An accent used sparingly draws the eye. One used on every heading, icon and border becomes background. See accent colour in web design.
  4. Not relying on colour alone. WCAG's Use of Color criterion (1.4.1) says colour mustn't be the only way information is conveyed. Error messages need words as well as red, and links in text need an underline or another marker.
  5. Fit with the subject. Taking the colour from the business, its signage, product or materials, is the most dependable route to a palette that feels right.

Colour-blind visitors

A significant share of men, and a smaller share of women, have some form of colour vision deficiency, most often difficulty telling red from green. Any colour psychology that depends on red versus green, such as a red “no” and a green “yes” with no labels, fails for them. Pair colour with text, icons or position. Designing for colour blindness covers the specific pairs to avoid.

Colour in Anticode

Anticode's design systems take the conservative, evidence-friendly route: neutrals from the system's own palette for grounds and text, and one action colour for the buttons and links that matter, so the action is the thing that stands apart. The action colour is one of eight (red, orange, gold, green, teal, blue, pink or black), set in the visual editor. The suggestion is to choose the one closest to the business itself rather than one a colour chart recommends.

Questions people ask

Does colour psychology actually work?

In a limited way. Colours carry associations that depend on culture and context, and contrast affects what gets noticed. The universal colour-meaning charts are not well supported.

Do red buttons convert better?

Not as a rule. Buttons that contrast clearly with their surroundings tend to be noticed; the specific hue that achieves that depends on the page.

Which colour makes people trust a website?

None on its own. Clear contact details, specific copy, real photos and a consistent, readable design do more for trust than any hue.

Sources

  1. Understanding Success Criterion 1.4.1: Use of Color, W3C, checked
  2. Understanding Success Criterion 1.4.11: Non-text Contrast, W3C, checked