Working with the Colour contrast analyser by the Paciello group

Ben Logan - Published: 17th Feb 2009 18:34 GMT

Colour contrast is an important aspect of website design and the colour choices you make on your web site can impact on various end users.

In brief, there are three types of colour blindness:

• Deuteranope: insensitivity to green
• Protanope: insensitivity to red
• Tritanope: insensitivity to blue

The protans and deutans cover 99% of the colour blind population and a higher percentage of men (roughly 1 in 12) than woman (roughly 1 in 200) suffer from colour blindness. The proportion of any detectable colour blindness in the western world is quoted at around 8%.

Colour contrast under WCAG 1.0

To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.

W3C Checkpoints:

• 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1]
• 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. [Priority 2 for images, Priority 3 for text].

Colour contrast under WCAG 2.0

In the final release of WCAG 2.0, the acceptable minimum color contrast ratio was changed from 5:1 to 4.5:1.

The new guidelines are actually slightly more lenient towards designers compared to the WCAG 1.0.

W3C Checkpoints:

Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

• 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
• 1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

Working with the tool

This tool actually comes bundled with the Web Accessibility Toolbar 2.0 but is available as a standalone application. We tend to use both and the standalone Colour Contrast Analyser can be very useful if you do not wish to install anything within the web browser during the testing process.

Screenshot

Selecting foreground colour

In order to use the tool you need to run it from either standalone or as part of the browser add ons. You will see it loads up a box where you can select colour values using the eyedropper tool, or by entering the HEX code direct into the colour box.

Selecting background colour

Again using the eyedropper tool, or by entering the HEX code direct into the colour box you can then select the background colour.

Viewing the results

You will then see if your results have generated a sufficient ratio to pass against WCAG by looking at the results options towards the bottom of the tool.

back to top