Effective use of colour online

21st June 2015

I believe that effective use of colour is key to a successful and accessible website. Communication and brand recognition is greatly aided by the use of a simple, relevant and effective colour scheme throughout the site.

‚ÄčOptimising design for the screen based medium is something many print designers take a while to get to grips with as designing for websites involves dealing with backlit luminescence, which can vary from monitor to monitor and from platform to platform. Colours are RGB not CMYK. Therefore effective and use of limited colour with emphasis on contrast is very important. An understanding of how certain colours perform on screen compared to when they are printed helps avoid communication and branding mistakes.

In general it's a good idea to restrict the number of colours used and isolating areas involving large amount of colour variation i.e. colour-coded section dividers, navigation elements and photography. Other points to note are that: large areas of text are more readable on black on white than white on black. Sites can involve movement as well as clever use of colour to emphasise important points and branding truths.

Understand your audience

Understand your site's message and brand

Choose colours that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colours such as blue, grey, and green. In this case, using warm, vibrant hues would undermine the site's brand.

Cultural differences can lead to unexpected responses to colour. Additionally, demographic segments and age groups respond to colours differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use contrast for readability

Colours similar in value do not provide enough contrast and hinder legibility and accessibility. Black text on white backgrounds provides the highest degree of contrast.

As ever its important to test and test early... here is a useful tool to use as a guideline/reference point: http://leaverou.github.com/contrast-ratio/