1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.05.04 Colour usage: Without colour

Do not rely on colour alone

Please ensure that text and graphics are understandable when viewed without colour.

Colour should not be used as a unique way to convey information (for instance you must avoid statements like "All items marked in red are compulsory") as people with certain vision impairments (e.g. colour blindness) will not be able to distinguish differences between colours. This will also be the case for users who are reliant on speech and text browsers, and those accessing the site with monochrome devices (e.g. some palm tops).

If possible define colours using CSS - this will allow users to override colours on the site to suit their preferences.


Example 1

Please consider the following web page extract:

Click on the red Bramley apple to get more information on this type of apple: A green, a red and a yellow apple
To a person with red/green colour blindness this image may look like this: apples with little colour difference
On a monochrome display it may appear like this: apples with no colour difference
Which means it will not be possible for the visitor to know which image link they need to follow.
It would be best to remove the reference to colour and clearly indicate in text which apple is a Bramley:
granny smithGranny Smith
bramleyBramley
golden deliciousGolden Delicious

Example 2

Another common error is to highlight required, or unfilled, fields using colour. As per Example Form One where red text is used to indicate requirement.

Example Form One
Fields in red are required
Example Form Two
* indicates a required field

Do not rely upon colour to give this information.

A possible solution can be seen in Example Form Two where an asterisk is used to indicate the required fields.

It should also be noted that it is best to warn users of requirements before the form rather than after.


Next: Dyslexia