Colour is one of those dangerous areas of design, where most people think it is all just down to opinion. A lot of people think that liking a colour is the same as thinking it is the best colour to use, and there’s no reason needed to justify certain colours and colour schemes other than ‘it feels right’, ‘I like it’ or ‘it suits the brand’. In fact colour is an immensely powerful design tool, and this power can destroy the design of a website just as well as it can enhance it. As with other aspects of design, choosing colours should be done purely to enhance the experience of the person using the website, and not based on personal preference at all. Here are some pointers to help you think more objectively, and more intelligently about colour in web design:
Text colour contrast and readability
We can all agree that the most important thing about text, is that is must be readable. When you throw various screen sizes and brightnesses, being used in all kinds of different environments (offices, outside in sunlight etc.) into the mix, and a wide range of end users with different levels of eyesight, this starts to become a more difficult task. The key to using colour well in text and website copy, is firstly to use dark text on a light background. It is alright not to do this for headings, but for paragraphs of text, reading light text on a dark background fatigues the eyes, and therefore damages the experience. As well as using dark text on a light background, you need to make sure that the contrast between the text and the background is strong enough. This means that all things being equal, the lighter the background, and the darker the text, the better. For example, using medium grey on a slightly light grey background will be hard to read, because there is not much difference between the colour of the background and the colour of the text. This problem is only made worse on say a mobile phone screen in direct sunlight, whilst someone is being jostled on a bus! You don’t have to always use black text on white, but always keep that contrast in mind.
Minimalism vs Multicolour
A reduced colour palette is almost always going to work best. It is much easier to create a good user experience, based on solid usability, if you are working with three or four colours in your website as opposed to seven or eight. The theory behind this boils down to one thing: attention (and it’s implied opposite, distraction). Colour is a great tool for communication. In the context of a website, you can communicate to a visitor what a text link or main action button is purely by way of colour. This communication is damaged, however, when there is a lot of distraction, in the form of other colours. You can think of it almost like camouflage – a green and red parrot is going to be easy to spot as it flies past a white building, but as soon as it lands in a bush full of blue, orange and yellow flowers, it almost disappears. Using a limited colour palette helps you to create a simple visual language on your website that users can understand very quickly. This visual language will help you draw people’s attention around each page to exactly where you want, and to communicate important things very quickly. A nice orange ‘Buy now’ button jumps out beautifully from a mostly white website. Use minimalism to your advantage!
Consistency
Leading on from the previous point, always make sure that you are consistent with your use of colour. Since colour is such a powerful communication tool, its important to make sure that you always communicate the same thing with the same colour. If you have chosen to use a certain green colour for text links on your website, then avoid using that green for any other kind of text formatting, because this could be confusing. Imagine if we used green light to mean stop for pedestrians at traffic lights, but kept green to mean go for cars – every time you get out of your car after getting used to green meaning go, you would have to stop yourself from walking into oncoming traffic as soon as you see a green light! Choose one colour for action buttons, one colour for text links, one colour for menu items and so on, and make sure to keep this consistent throughout your entire website.
Colour, emotion and atmosphere
This is the area of colour theory that has the least amount of definite data, but it is still extremely important. Different colours evoke different feelings and emotional responses. Depending on the type of business or website you have, you can use this to your advantage. For example Blue is often associated with security, and elicits a feeling of trust. It is often used by financial services companies. Red is often associated with immediate action, aggression and sales. You can see how red would probably not be an ideal colour to use a lot on a bank website, but it would be great for a discount adventure tourism website. Pink is relaxing and associated with a softer, feminine atmosphere. Using pink in a beauty product website would work well. Using blue, associated with safe and secure formality however, would likely work less well. There is a lot of depth to this side of colour theory, but it always pays to do some research about your specific area, and the kind of people that will be visiting your site and potentially buying products from it, and learning about how you can use colour to your advantage.
So next time you’re thinking about what colours to use and find yourself about to say ‘let’s use that…I like it’, or ‘…it feels right’, take a moment to think objectively about it, reflect on these points, and check if you are really using colour in a way that enhances the experience of your website visitors, becuase ultimately that’s the most important thing.
