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:
To a person with red/green colour blindness this image may look like this:
On a monochrome display it may appear like this:
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 Smith Bramley Golden 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
Name
Email
Address
Telephone
Hair colour
Shoe size

Example Form Two

* indicates a required field
Name *
Email *
Address
Telephone
Hair colour
Shoe size

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.

---