eGovernment Resource Centre - Victoria, Australia

Victorian
Government
Contact Centre
1300 366 356

Main Menu

Categories, RSS and More

Main Categories

Shorten URL

Please enter the URL that you'd like to shorten or click here to shorten current:


What's this? loading...

Rate this Site

Thanks for visiting. To help us help you find what you need please take our 1 minute Visitor Survey.

Members Forum

The Forum is the place for members to post their opinions and exchange ideas.

Ensuring sufficient colour contrast

Colour contrast is important for people who have vision impairments, including people who are colour blind. One in five men has some form of colour blindness, so this is a common problem.

There are different types of colour blindness caused by defective rods and cones in the eye, however the three most common types of colour blindness are:

  • Deuteranopia: Red / green colour deficit
  • Protanopia: Red / green colour deficit
  • Tritanopia: Blue / Yellow colour deficit (rare)

People without colour blindness see:

Image showing what people see who are not colour blind.


Depending on the type, people with colour blindness see:

An example of what people who have the the 3 types of of colour blindness - Deuteranopia, Protanopia and Tritanopia - see.


Relationship to checkpoints:

Checkpoint 2.2: Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen

  • This is a Level AA checkpoint for images conveying information.
  • This is a Level AAA checkpoint for text.

Ensuring adequate colour contrast when designing a site

The W3C developed an algorithm to ensure adequate colour contrast . This algorithm uses the hexadecimal values of foreground and background colours to determine if the colour contrast is sufficient. The W3C algorithm is not yet a recommendation and some experts have said that it is too strict.

Instead of using the algorithm every time you need to test your colours, you can use the JuicyStudio Colour Contrast Analyser, which automatically calculates the algorithm for you.

 The Colour Contrast Analyser provides two outputs:

  • Colour brightness - Algorithm: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
  • Colour difference - Algorithm: (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Colour brightness refers to the difference in brightness between the foreground colour and the background colour. Colour brightness must be a value of 125 or higher. Colour difference refers to the difference between the foreground and background colours. Colour difference must be a value of 500 or higher.

Testing a site for adequate colour contrast

There are two ways to test a current site for adequate colour contrast:

  • Run the colours through Juicy Studio
  • Use Vischeck

Run the colours through Juicy Studio

You can use Juicy Studio if you know the hexadecimal values of the colours. (You can use the Iconico ColourPic tool if you don’t know the hexadecimal values).

Use a colour blindness simulator

You can use Vischeck (or one of the other colour blindness simulators), however you need to be aware that this does not utilise the W3C algorithm. You can test an entire web page with Vischeck , however style sheets etc are not well-supported. Alternatively you can test an image with Vischeck . If you have Adobe Photoshop or ImageJ you can download a Vischeck plugin which applies a filter to images. The easiest way to test a page for colour contrast is to take a screenshot of the page (by pressing the “Print Screen” or “prt sc” button on your keyboard) and upload it via the image facility or filter it using one of the plugins.

Further Information

W3C

Information on colour vision

Information on colour blindness

Tools

Added: 9 July 2007 Page views: 2,824 Rating: 0 Votes: 0
Review and rate
Last updated: 9 July 2007