Making Accessible Websites for the United Nations

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.

Explanation

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.

Rationale

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.

Technique

Give other visual or textual clues.

Below are some common situations which should be avoided:

  1. 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."
    Red and green buttons
    Complement the colour cues with text:
    Red Stop, Green Continue Buttons
  2. Avoid similar statements: "All fields marked in red are obligatory". Instead use other visual clues: "All fields marked with * are obligatory"
  3. 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.

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):

  1. Go to Disable > Disable page colours
  2. Go to Images > Disable all images
Success Criteria

There is no critical information missing when colours and/or images are disabled. Links in the text are clearly identified and underlined.