Choosing Colours for a Business Website. What the Research Says

Use three main colours at most and give your buttons the one that stands out. Blue is the safest trust signal, but a colour that fits your business matters more than the exact shade, and contrast matters more than either.

By some industry estimates, colour may influence 62–90% of an initial product assessment (CCICOLOR, cited in Singh, Management Decision, 2006). It's an industry figure rather than a controlled experiment. Still, colour is worth getting right.

Does colour really affect trust?

It helps, but fit matters more than hue. Labrecque & Milne (Journal of the Academy of Marketing Science, 2012) found that the link between a brand and its colour depends on perceived appropriateness, meaning whether the colour suits what you sell. So a colour that fits your business should do better than a "trustworthy" colour that feels wrong for it.

Blue is the safest default. It's the most widely preferred colour across genders and age groups (Hallock, University of Washington survey), which is why banks, insurers and enterprise software lean on it. It's still only a starting point. If every competitor in your field already uses blue, a well-chosen non-blue palette can make you more memorable. That's the Von Restorff effect: things that stand out get remembered.

Colour also signals where you sit in the market. Nielsen Norman Group (NNGroup) found that subdued, darker palettes read as premium and high-service, and bright, saturated ones as budget and accessible. The same research found that an overly colourful look can come across as "discount" in a professional context. Neither is wrong, but they say different things.

How many colours should a website use?

Three, plus neutrals. NNGroup recommends the 60-30-10 rule: one dominant colour across roughly 60% of the page, a secondary colour for about 30%, and an accent for the remaining 10%. Use the accent on buttons, links and anything else you want clicked.

On top of those three you need a small set of greys (background, borders, muted text, body, headings) and four "state" colours for errors, success, warnings and information.

A complete business palette is usually 11–13 colour tokens in total. Past 13, you're probably building a design system rather than a website.

A tight palette is easier to read and far easier to maintain than fifteen shades nobody can keep straight.

Should the accent colour match the brand colour?

No, and a lot of people get this wrong. The colour you want people to act on should contrast with everything around it. The research favours an analogous base (colours near each other) with a highly contrasting accent for calls to action (extrapolated from Schloss & Palmer, Attention, Perception, & Psychophysics, 2011).

In HubSpot's often-cited test from 2011, a red button beat a green one by 21% on a page that was heavy on green. The result is widely read as a contrast effect rather than proof that red is special.

So your "Book a call" button should be the loudest thing on the screen. If it's the same colour as your header, it disappears.

What about contrast and readability?

The WCAG 2.2 standard sets minimum contrast ratios so text stays legible: 4.5:1 for normal body text and 3:1 for large headings against their background (WebAIM, Contrast and Color Accessibility). On white, the lightest grey that still passes for body text is roughly #767676. Anything paler fails. We treat these ratios as a build rule.

Colour blindness is the other thing to design for. Around 8% of men of Caucasian descent have red-green colour vision deficiency (lower in other groups; Colour Blind Awareness). That rules out a few common mistakes:

• Red and green next to each other merge into a muddy yellow-brown for that 8%.
• Don't rely on colour alone to carry meaning (WCAG 1.4.1). Add an icon, a label or an underline, and keep your links underlined.
• If a design still works in greyscale, it works for colour-blind users too. Blue is the safe primary here as well, since the most common deficiency leaves it untouched.

Do we need a dark mode?

Usually not. Light mode is measurably better for reading. Studies found better visual acuity, especially for small text and long content, even at night (Piepenbrock et al., 2013; Dobres et al., 2017, both via NNGroup). Users tend to believe dark mode helps more than it does.

They don't miss it either. In an NNGroup survey (n=115), preference split roughly into thirds (dark, light, mixed). But people set dark mode at the operating-system level, barely notice when a site doesn't offer it, and never abandon a site over it. The main exception is products aimed at developers, who expect dark by default. For nearly every other business, including finance, legal, healthcare, e-commerce and consulting, light is the right default.

Does culture change which colours work?

Yes, if you sell internationally. Red signals luck and prosperity in China but danger in the West. White means purity in much of the West but mourning in parts of East Asia (Aslam, Journal of Marketing Communications, 2006). Blue travels best and reads as trustworthy almost everywhere. For East Asian markets, a warm off-white background tends to sit better than stark pure white.

FAQ

What is the best colour for a business website?

Blue is the safest single choice. It's the most widely preferred colour and reads as trustworthy across cultures (Hallock survey). A colour that fits your business and stands out from competitors can still do better. Fit and contrast matter more than the specific hue (Labrecque & Milne, 2012).

How many colours should a website have?

Three main colours following the 60-30-10 rule (one dominant, one secondary, one accent), plus a few neutral greys and four state colours. That's about 11–13 in total (NNGroup). More than that usually hurts clarity.

What colour should a call-to-action button be?

Whichever colour contrasts most with the rest of the page, so it draws the eye. What gets buttons clicked is contrast rather than a particular hue (the much-cited HubSpot button test, 2011, is best read as a contrast effect).

Do I need a dark mode?

Most businesses don't. Light mode reads better, and users rarely notice or miss dark mode when a site doesn't have it (NNGroup). Developer-focused products are the main exception.

Body text on our sites passes 4.5:1, and the accent colour is kept for the things people should click. If your main button shares a colour with your header, that's where we'd start. Book a call to look at the rest of your palette with us.