Colourful Contrasts

Most websites have a white background and black words.

That’s great. That’s a good contrast. It’s easy to read.

Even better is a slightly off-white background like #EEEEEE and a dark grey contrasting colour like #111111

Now some people want to get fancy and do it the other way around.

Black background, grey text

The contrast is still good but it’s not as easy on the eye anymore.

For design-focused websites, this may work. For text-heavy websites, it’s a pain.

If you want to be different, use a colour. Like this:

yellow background

The background stands out but it’s light with dark text, so there’s still a good contrast.

It’s easy to read but maybe a bit too bright on the eyes if you watch it for too long. That’s why the rest of Wynter‘s page is white, not yellow.

The problem with a colourful background is that many don’t get the contrast right. The title might be difficult to read, or the call to action button might be hard to see.

So what should you remember from this?

  • Choose contrasting colours
  • Use off-white and dark grey
  • Mind titles and buttons when you pick a brighter colour.

And perhaps that it’s best of all to stick to the basics: light background and dark text:

white background, dark text

Leave a Comment

Your email address will not be published. Required fields are marked *