Colours are among the first things visitors notice on a website. They shape the mood, how the brand is perceived, and how easy the site is to use. Yet a common mistake is to pick colours on aesthetics alone.

A good palette isn't only attractive — it's readable, consistent, and usable by every visitor.

Start with the content, not the colours

Before you start rummaging through your favourite shades, it's worth asking one simple question:

What do you want the visitor to do on this page?

A law firm's website calls for a different mood than a toy shop or an artisan bakery. Colours should support the content and the brand, not distract from it.

In most cases, all you need is:

  • one primary (brand) colour,
  • one secondary, complementary colour,
  • and a few neutral shades for backgrounds and text.

Beginners often use too many colours. As a rule, three to five well-chosen colours are more than enough.

Text matters more than the background

Many people spend hours fine-tuning the background colour, while visitors spend most of their time reading text.

So the key question isn't “is the colour pretty?” but rather:

Is the content comfortable to read on it?

Light grey text on a white background can look modern in a design mock-up, but it quickly becomes tiring over a longer read. The same goes for garish backgrounds or low-contrast combinations.

As a general rule:

  • use dark text on light backgrounds,
  • light text on dark backgrounds,
  • and always check the contrast ratio for important content.

Why does contrast matter?

Contrast is how clearly the text stands out from its background.

If the contrast is too low:

  • reading gets harder,
  • usability suffers,
  • and for low-vision users the content can become unreadable altogether.

The WCAG (Web Content Accessibility Guidelines) recommend a contrast ratio of at least 4.5:1 for normal-size text.

That may sound like a technical detail, but in practice it's simple: if a combination is hard to read when you squint or view it on a cheaper monitor, it will probably be a problem for some of your visitors too.

Yellow isn't always your friend

Plenty of sites use bright yellow buttons and backgrounds. Yellow is eye-catching and energetic, but it has one special property:

It's very light.

That means it often gives poor contrast with white text. A combination that looks great in a mock-up can easily become unreadable in reality.

In those cases, dark text is usually the better choice.

Contrast isn't a matter of taste — it's a measurable property. It's worth checking before you finalise the design.

Think about colour-blind users too

Not everyone perceives colours the same way.

A red-and-green combination, for example, is hard to tell apart for many colour-blind users. That's why it's important not to convey information by colour alone.

Bad example:

  • red = error,
  • green = success.

Better approach:

  • icon + colour,
  • text + colour,
  • distinct shape + colour.

That way the information stays clear even for someone who doesn't see the same shades.

Don't follow trends blindly

Design trends change constantly.

There was a time when every website was dark. Later, pastel colours ruled. Today, minimal, restrained palettes are popular.

Trends can inspire, but they don't replace good usability.

A simple, readable, consistent colour system will still work years later, while a fashionable but poorly usable choice can date quickly.

A simple recipe for beginners

If you don't know where to start, this split usually works well:

  • 70–80% neutral colours (white, off-white, shades of grey),
  • 15–20% primary brand colour,
  • 5–10% accent or call-to-action colour.

This gives a clean look while the important elements — buttons or calls to action — genuinely stand out.