Colour Choice Mistakes To Avoid In Web Design

Colour choice in web design is a highly debated topic. Many articles have been written on the subject and new trends emerge yearly. However, there are a few rules about which colour choices to avoid. In our blog this week, we look at which web design colour choices to avoid, and why.

Colour Choice

Colours matter in web design. A lot. The right combination of colours can convey professionalism, experience, authority, friendliness, etc. Whilst the wrong combination of colours can lead to a marketing disaster.

Colour touches us all of us at a basic, even primal level. To give you an example: In nature we all know that Red is a warning colour. Red berries, Red-capped mushrooms, – they’re poisonous right? We also know that Yellow in certain situations means danger – think wasps, bees and hornets. Over the thousands of years of human evolution, we have learnt to ‘read’ the world around us using colour… this hasn’t just disappeared because we live in modern cities and have state-of-the-art technologies at our fingertips. Understanding the power that colour holds over us, and harnessing this properly is what designers strive for – or should do.

This rough guide to negative and positive responses to colour is from the same article and gives a good starting point for colour choice,

Colour choice mistakes

Don’t use Pure Black

Pure black does not occur naturally, as a colour on a computer screen, #000000 – or pure black, is jarring and overpowers adjacent colours. Whole articles have been devoted to why you should avoid pure black in design with one author noting,

When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural. All of the “black” everyday objects around you have some amount of light bouncing off of them, which means they aren’t black, they’re dark gray. And that light probably has a tint to it, so they’re not even dark gray, they’re colored-dark gray.

In the same way, the majority of black you see on a website is not actually black, rather it is very dark shades of grey. As a good tip, add a little colour such as blue to your greys to make them less dull and more blended.

Red and Green Should Never be Seen

There are a few good reasons to avoid putting the colours red and green next to each other,

You will have visitors to your site that have some form of colour blindness. The most common form of colour blindness is deuteranopia which means people are unable to distinguish between green and red.

Red and green are very close together on the visible spectrum and as a result side by side, they tend to increase the brightness as each colour competes with the eye for the foreground.

People tend to have very strong emotional associations to these colours that are polar opposites for each colour, resulting in conflicting emotional responses to your page.

Avoid green, yellow and purple on a green background

Yellow and purple become too intense to be read properly with a green background, making the reader squint. Here is a great graphic from Site Point that shows exactly the problems a green background can cause.

Don’t put light colour text on a white background

Adding a pale colour text to an already white background creates a conflict for the eyes and leads to readability problems for your page. As you can see here.

Darker shades of grey or black are probably best for a white background.

Neon and rainbow colours are abrasive

While it may certainly be eye-catching, neon or rainbow colours on a website become abrasive to the eye very quickly. Whilst the image below may be an extreme example it highlights the issue well,

Don’t put red, blue or purple text on a black background

Unless you really want to push the goth look, always avoid red text on a black background. Black is not a good background for blue or purple text either, the swallowing effect of the colour combinations render it hard to read. In fact, even white text can be difficult to read against a black background. If you must have a black background try putting the text in boxes instead.

We hope this blog has been of use. If you have any questions or would like to talk to us about your website design you can call us on 0800 612 1098 or contact us here