First and foremost, colour is a communications tool on your website.

You might think of colour as a creative element, but principally colour is used to facilitate communication of your key messages. Using the wrong colours or wrong combinations of colours will lead to hesitation, frustration, and a less than satisfying user experience on your website.

Emotional response

Colours convey meaning. You probably spent a really long time selecting the colours for your logo, because you wanted to impart just the right brand attributes. For example, yellow says cheer and warmth and optimism. Blue says stability, trust and confidence. This is why it is a popular choice for banks and other corporations. (Although it doesn’t seem to be helping Facebook at the moment.)

If your colours aren’t consistent with your brand and messaging, people will feel the disconnect. You wouldn’t choose red as the primary colour for your spa or massage clinic – it just isn’t relaxing.

Colours that convert

Colours aren’t only used in design though. All the elements – typography, buttons, tables – use colour, and your choices can impact the usability and ultimately conversion rates for your calls-to-action. You need to find out what works best for your customers. Does a blue ‘Add to cart’ button get more clicks than a purple one, for example? This type of question is perfect for a/b testing. Run both options for a set period of time so you can measure the conversion rates of each colour (all else being equal) and determine a winner.

The colours that persuade also differ based on the shopping habits of your customers. For example, if your product caters to impulse shoppers, they will react more strongly to orangey-reds and blacks. Use these for your sale messages.

Usability of colour

It isn’t all about click-through rates though. Poor colour choices impact the usability, accessibility, and readability of your content.

Poor contrast

Ensure there is enough contrast between your text and background colours. Combinations like grey text on a grey background, or yellow text on white will have people straining to read.

Contrast also applies to the colour of hyperlinks and plain text: can links be quickly identified when scanned? Try this excellent colour contrast checker from WebAIM that will tell you if your colours are accessibility compliant.

Wrong colours

Did you know that red on blue can induce seizures or migraines in some people? They seem to flicker when processed by the brain. If you want to see for yourself, here are some red-on-blue-background images on Google. Viewer discretion is advised!

Same colours

Are your headings the same colour as your hyperlinks? It’s frustrating when you don’t know where to click. This is a big usability violation: if things look the same they should behave the same.

Light-on-dark or dark-on-light

White or light text on a dark background has a more dramatic effect, but it hinders readability. Use it sparingly for headings and calls-to-action – not whole paragraphs of text. Since white reflects light, every word is reflecting, rather than absorbing and it makes reading more difficult.

Reliance on colour

If you only use colour to signal a change, you may be excluding the 8% of men and 1% of women who are colour blind. For example if your unvisited hyperlinks are green, and visited state is red, the change may not be perceived at all.

For this reason it’s a good idea to underline your links as well, so they are easily detected. (Learn more about hyperlink best practices)

Know your audience

Colours aren’t universal; their meanings vary from country to country so what resonates in the US may not in India. Yet another reason to know your audience and test with real people. The good news is colour is pretty easy to change on websites, especially in typography. So if you aren’t sure, it’s OK. Here’s a summary of the tools and resources that can help:

• Run an accessibility audit tool like WAVE – it will identify colour-related issues with compliance
• Do some split tests with an experimentation tool like Optimizely and measure what colours perform best
• Conduct usability tests and get direct feedback from customers on their preferences
• Work with a designer to ensure your colours reinforce your brand message

And as always, you can talk to this user experience expert who can audit your site and identify ways to improve use of colour (and everything else).

Colour Resources

Colour Meanings
Colour Blind Awareness
How do colours affect purchases
WebAIM Colour contrast checker