The Principles of Good Web Design Part 3: Colour

  • 24th September, 2009
  • Tom Kenny
  • Articles

This is the third part in this series of The Principles of Good Web Design. The other parts are listed below:

Colour is an often underrated aspect of web design but can play a very important role in usability as well as convey the overall meaning of a brand as well as the overall mood of the website. Different colour combinations can evoke different emotions and reactions.

Colour design is often very subjective but it is important to keep usability in mind. Changing colour for subjective reasons may ultimately have a negative affect on usability.

Contrast

Readability relies a lot on typography but colour contrast is also key to keeping text readable. Make sure there is enough contrast between the text and the background colour or image.

Jonathan Snook’s colour tool does an excellent job of assessing colour combinations from an accessibility point of view. In real-time it displays accessibility ratings based on WCAG guidelines.

Good Examples

yellowOnBlack

redOnCreme

whiteOnRed

As you can see everything is perfectly readable and all the examples above pass every standard on Snook’s colour contrast tool.

Bad Examples

orangeOnBlue

yellowOnPink

blueOnBlue

All of these examples of inadequate levels of contrast between the text colour and the background colour making it much harder to read. This is especially evident as the text gets smaller.

Thankfully this doesn’t seem to be a huge issue on the web these days as most designs at least adhere to some of these rules resulting in comfortable reading conditions. That being said, there are a sites and designers out there that fall foul of this basic concept. Don’t be one of them.

Importance

Colour can be used to guide users to where you want or need them to go. For example, using more noticeable colours such as red or orange for primary links and blue or green for secondary, supplemental links is a good way of increasing the chance of a user to follow the links that are most beneficial. This is often known as a ‘call to action’.

amazon

Amazon colour importance

The specialists in this area are Amazon and they use yellow coloured buttons for their ‘call to actions’ and washed out colour for their secondary links as seen on the ‘Add to Wish List’ button.

Colour Examples

One of the main ways to convey the meaning of your brand is through the use of colour. For example, a toy company may use bright and vibrant colours whereas a jewellers will likely use more elegant colours such as something similar to gold.

Toys R Us

toysrus

Toys R Us, as you would expect, have a very colourful, fun and vibrant colour scheme.

Mail Chimp

mailChimp

Mail Chimp uses nice big orange and green buttons to guide the user to where they want them to go. The orange buttons represent the primary links and the green ‘View a Demo’ button is a secondary and supplementary link.

This is the second part in this series of The Principles of Good Web Design. The other parts are listed below:

A little while ago, we looked at 42 Very Colourful Websites which you may also want to check out.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: