Use of colour

It goes without saying that you will want to make your website look attractive, using colour is a great way to do this if well implemented. Websites without colour can look terribly dull and unattractive!

Visual clues like colour coding certain items can be useful to some people but certain groups of people will miss out if an instruction is colour specific, for example "click the green button to continue".

The following are issues that must be addressed with regard to how colour is used in order to comply with the accessibility guidelines laid out by the WCAG.

  • For people with colour blindness certain colour combinations cause huge problems. There are three main types of colour blindness - each has different colour combinations that are problematic. Check your colour combinations to ensure there is an adequate contrast - see the Design Toolkit for relevant software.

  • Cataracts and other sight impairments cause issues with contrast. Pale blue for example does not work when read against a white background.

  • Avoid the temptation to use garish background colours in areas of your site that contain text - a bright pink background with black text is not nice to read. It's much better to stick to a subtle, pale colour with dark text as this is easier on the eye.

  • When coding background and text styles use an external style sheet (CSS) rather than just putting the styles in the individual pages - this enables users to turn off your styling if necessary and use their own. This can be particularly helpful to people with dyslexia. It also enables you to change the look and feel of your site more efficiently since you only have to change one document rather than every instance of a particular style. Using an external CSS also enables pages to download faster.

  • We recommend that you also provide a high visibility CSS for your site as we have on this site. Please remember that high visibility does not necessarily mean loud and garish!

  • Keep bright colours for small areas on your site

There are various free tools that you can use to test colour combinations, contrast, how things look to the colour blind etc. see the Design Toolkit section for more information.