Which colour works best with a monitor? How will a colour-blind person see my site? Which colour combinations are easiest on the eye? The best use of colours often goes unnoticed. It just works well and gives your website a pleasant look. In this article I'll be taking you through some really bad practices and explain how we, as designers, can avoid doing the same mistakes.

I always take great pleasure in working out a colour combination before I start working on a design. Even though I'm working with a client that already has strong brand guidelines, like Virgin or AXA, it is important to find supplementary web colours.

But just finding colours that work well together is not enough when it comes to designing for the web. A number of things have to be taken into consideration before deciding on a set of colours.

Bad practice

Here are some of the most common bad practices I've come across:

Colours are too strong and end up competing with the products or important information for attention
I've come across this scenario many times and quite often it is caused by the client wanting their corporate colours to come through in the design. It is still rare that a company has its set of print colours as well as a set of web colours; they are normally one and the same with little thought as to how their brand will be presented online.

Dixons.co.uk makes a good job of hiding their products by using too strong colours and too much design. Remember that there is nothing more important than the products.

When we're working with design for the web there are many opportunities to use colour, whether we're dividing content, designing buttons or working with typography. It is quite easy to use the corporate colour scheme on these occasions as it makes for a happy client and less work, but it is rarely the best approach. Complementary web colours are the key. This allows for strong branding using the corporate colours as well as thoughtful and usable design for the rest of the site.

Lack of colours makes a website drab and uninteresting
White is probably the best background colour for large chunks of text but lets not take it too far. I see this all the time and I always get the feeling that the designer has taken the easy way out. After all, use of colours is sometimes very hard and considerable work has to be put into it to make it really good.

growthhouse.org definitely needs a lot more improvement than just colours but I'll use it as an example anyway.

Background colours that are too strong and make the text illegible
This is a design feature that I'm surprised is still around. Even on very well crafted websites we can find examples of this bad practice. And if I cannot read it without leaning forwards then the large number of people with sight impairment will surely miss it completely.

Newstoday is undeniably designed for a young audience but the grey on grey is a bad choice when it comes to reading text.

Colours that have been used on printed material are used on the web
That dark blue with red text on top might be absolutely fabulous for your high-quality printed brochure but that does not mean it will work on a monitor.

Too many colours are used
Don't get over excited. Many colours do not make a site. Try instead to work with a few and play around with the saturation.

Oddbins.co.uk are using way too many colours on the site making it difficult to know whats important.

Taking lessons from real life

Even though we all have different preferences when it comes to colours there are certain things that we all have in common. The colour green for instance is very hard to work with since the human eye can discern more shades of it than any other colour. It is therefore a chance that some people will find the choice of green you thought looked especially much like olive to be the worse shade of green ever imagined.

Most people would not take pleasure in reading a book with black pages and white text. It would hurt our eyes and we would soon develop a headache. It is also a fact that more red cars are involved in traffic accidents because the colour red makes us upset. Blue is a very neutral colour that we like for our bathrooms and bedrooms and is also probably the most used colour on the web today.

The next installements of Windows, �Longhorn�, is based on the colour blue. So is OSX and Windows XP.

We appreciate a bookcase coloured in one colour so that it does not take attention away from the book titles, while we wouldn't appreciate a circus as much if it wasn't for the mad use of lots of different colours.

Very few people dislike a sunset, or a forest in the beginning of autumn. Taking colours from nature is a great idea and there is a good article 'Natural Selections: Colors [sic] Found in Nature and Interface Design' over at Boxes & Arrows

Implementing our lessons

Most sites that I work with have lots of content and/or products to display (this is, after all, normally why they need a UC Designer) and lots of content do not go well with lots of colours. But we still want a colourful website right? One way to solve this is by using very subdued and less saturated colours. Use these light colours as background to divide different types of content on the site. A good way of doing this is to take the colour combination that you should be using for branding and perhaps your header and footer. See what you can do with the different colours just by changing the saturation. While a strong orange colour makes for a horrible background to your links, a very light orange can really lift the site.

For CitiesofScience.co.uk I used different shades of blue to divide content effectively.

Next take a look at your text colours. You should ideally be settling for as few variations as possible but sometimes it's nice to play around with different colours to differentiate content. Make sure that the contrast between the text and the background is strong enough so that it is possible to read the text but not to strong so that it hurts the eyes.

The hyper link colour is a much-discussed issue and for consistency a blue link colour is always a good idea. But there are exceptions that work as long as you are consistent throughout the website.

When designing Virgin Books I used the company�s red colour for links across the site.

But remember, just as with the circus, sometimes a design with a strong colour combination that uses many different colours is just what your audience is looking for. This is especially the case with websites for kids.

Resources

www.pixy.cz/apps/barvy/index-en.html
Great tool that allows you to see colours the way a colour-blind person would.