Colour Contrast

Key:

P - Perceivable
O - Operable
U - Understandable
R - Robust

Ensure that there is sufficient contrast between text (and images of text) and background behind the text (P)

Who does this assist?

This will assist users unable to distinguish between colours, and prevent the use of colours presenting poor contrast.

Good Practice Example

The Colour Contrast Analyser, free to download from the Vision Australia website, is an excellent tool for checking the contrast between foreground and background. The Australian Government requires:

All websites and web content created after July 2010 must meet at least WCAG 2.0 Level A (Single A) by 31 December 2012, and LevelAA (Double A) by 31 December 2014.

The eye-dropper tool within the Colour Contrast Analyser can be used gain the colour of the foreground and background colours and the software will determine whether the contrast between the colours meets these requirements.

Screen print of the Colour Contrast Analyser tool

Common Error Example

The following image demonstrates poor contrast between text and background colour.

Example of bad alt practice containing a notepad, pencil and the alt text 'pad and pencil' which describes the images rather than its purpose

Do not use colour alone to convey meaning (P)

How does this assist?

This will assist users with who may not be able to see very well or at all. This includes

images that convey information such as maps and diagrams
emphasis through the use of colour

Good Practice Example

Ensure that any information conveyed by colour is also available in text.

Common Error Example

The following example, from the webAIM.org site, demonstrates inaccessible use of colour. When a user is unable to view colours easily, it can hinder comprehension of information.