Choosing The Right Colours When Designing A Website.

Choosing the right colours when designing a website is a question that I get asked a lot.

Thankfully there are some useful rules of thumb to follow when it comes to working with colours.  Let's start off by considering why colour matters, then I’ll list some colour recommendations.

Why is colour so important?

Psychologists have for many years studied the effects of colour on the brain / emotions. There don't seem to be any absolutes truths here. People’s perception of colour is largely subjective so I don’t think we can be too instructive in this area. Red doesn’t always mean danger, and blue doesn’t always mean calm.

So where to start?

It turns out that it’s not so much about choosing one colour as choosing a bunch of them, and making them sit comfortably alongside one another. The psychology of colour is less aboutindividual colour washes, but rather an understanding of how people respond emotionally to multiple colours.

Usability and colour

Considerations relating to the psychology of colour, your brand, and your audience may help you narrow your colour choices.

Usability professionals have consistently warned us about the danger of making poor colour choices, for largely practical - as opposed to strictly aesthetic or psychological - reasons. Certain colour combinations are a non-starter. Poor colour choices can induce eye strain and headaches, forcing users to leave your site. Crazy page layouts can make matters even worse.

Yet this isn’t all about colour as such, but about contrast. Contrast is hugely important for accessibility reasons. Strong contrast is required to ensure legibility, so make sure the background is substantially different from the text colour.

Colour tips

Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the don't be afraid to experiment...

1.  Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black - or dark grey – text against a white background remains the most sensible option.

2.  Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google etc). Why reinvent the wheel?

3.  Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links.

4.  Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye..

5.  Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.

6.  Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.

7.  Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.

8.  Remember the role of images. Pictures can add a lot of colour and depth to web pages.

9.  Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd.