Page Design: Visual Elements
Do Not Rely on Colour Alone to Convey Information
WAI Definition (Checkpoint 2.1)
Ensure that all information conveyed with colour is also available without colour, for example from context or markup.
If colour is necessary, include a text label in conjunction with colour to communicate information effectively. The user should be able to clearly identify and understand an element on the page without the use of colour.
One in twelve people suffers from some sort of colour deficiency. Some cannot distinguish red, green or blue. Others have difficulties distinguishing foreground from background, if the contrast is insufficient.
Give other visual or textual clues.
Below are some common situations which should be avoided:
- Buttons using colour as the only descriptive label.
"Click on the green button to continue. Click on the red button to stop the registration process."
Complement the colour cues with text:
- Avoid similar statements: "All fields marked in red are obligatory". Instead use other visual clues: "All fields marked with * are obligatory"
- Do not rely on colour alone to highlight links outside of navigation elements. The best practice is to underline links. Alternatively, links could be bold.
Using the Firefox Web Developer's Toolbar (plugin):
- Go to Disable > Disable page colours
- Go to Images > Disable all images
There is no critical information missing when colours and/or images are disabled. Links in the text are clearly identified and underlined.