Making Accessible Websites for the United Nations

Page Design: Visual Elements

Colour Contrast

WAI Definition (Checkpoint 2.2)

Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.

Explanation

In text and images, ensure that foreground and background colour combinations have sufficient contrast when viewed by someone having impaired colour vision or when viewed on a black and white screen.

Rationale

Ensuring proper contrast between foreground and background colours is important for users, who are partially sighted or colour-blind, as well as for people who use a notebook screen or a projector on a sunny day. This particularly affects the elderly and those who have some form of colour-blindness.

Technique

Use the validation tools to ensure that colour combinations offer sufficient contrast.

Validation

A. For text and images with flat colours
Test

Colour contrast requirements can be tested using Juicy Studio Color Analyzer.

There is also a Firefox extension that allows for the testing of all colours on a page (with the exception of colours in images).

Success Criteria

All the colour combinations in the page pass level AAA or AA for regular text size.

B. For images without flat colours
Test

Run the image through Vischeck to simulate how the page will look if viewed by a colour-blind person.

Success Criteria

The information conveyed by the image is still understandable.