The Principles of Good Web Design Part 3: Colour

by Tom Kenny (@tkenny)

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.


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




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

Bad Examples




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.


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 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


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

Mail Chimp


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.

Improve your design knowledge in just a minute or two a day, for free


You'll get a free email every Monday to Friday with actionable design details that will increase the effectiveness of your designs. Each one only takes about a minute or two to read.

Free. No spam. Unsubscribe anytime.

by Tom Kenny

I’m a freelance web designer and front-end developer with 9 years of experience designing for the web. Follow me on Twitter here.