One commonly overlooked aspect of website accessibility is the contrast ratio between foreground and background colours.

White poor contrast can cause readability issues for well-sighted visitors, it can be even more of a problem for those visitors with a visual impairment.

Because of this, The New Zealand Government Web Standards and Requirements v 1.0 and W3C’s Techniques for Web Content Accessibility Guidelines v 1.0 both contain standards requiring content have sufficient contrast between foreground and background colours.

For example, The New Zealand Government Standards state:

“Ensure that foreground and background colour combinations provide sufficient contrast for navigation, text and informational elements when viewed by someone having colour deficits or when viewed on a black and white screen.”

Continue below for details on how to test for adequate colour contrast in your design or web pages.

Specific Standards

While the wording of the New Zealand Government standard is quite broad, the W3C and HP have more specific guidelines which we can use to measure the effectiveness of the contrast on a website or graphic.

The suggested way to measuring for sufficient contrast is done by measuring the colour brightness difference and colour difference. We then compare the figures from these tests to the suggested thresholds.

The W3C draft standard says that the colour brightness difference should be 125, and the colour difference should be 500.

HP recommends thresholds of 125 and 400, respectively.

Tools for Testing

Vision Australia’s Colour Contrast Analyser for Web Pages is highly recommended, however only works on Microsoft Windows.

There is a tool available for the Mac called Color Contrast Analyzer.app. This is probably the best known alternative to the Vision Australia tool.

How to test on the Mac

1. Install the Color Contrast Analyzer application (see the link above).
2. Identify areas of possible colour contrast problems.

   Look at your design or site and try to see where colour contrast problems might occur. Normally these are in graphics or headings, especially where coloured text is used on top of a coloured background. Because most content on websites is normally black text on a white background, it should be reasonably easy to identify where problems might occur.

3. Open Color Contrast Analyzer.app. You’ll want to keep the Color Contrast Checker application in the foreground with the design or website you want to test in the background so you can select colours from it.
4. Select the colour widget next to “Colour select:” for foreground, and a colour picker box will appear.
5. Click on the magnifying glass icon in the colour picker box and then select the foreground colour you want to test with from the design or website you’re testing.
6. Repeat for the background colour. In the case of gradient backgrounds, select the colour very close to the foreground text/colour you’re testing, but obviously not in the shadow or anti-aliased edge of the shape of text.

The test result will appear in the box in the bottom of the Colour Contrast Analyzer application.

The standard that you want to achieve is the W3C’s 500/125 standard. However, this can be difficult to achieve at times so some web developers and designers have decided that HP’s 400/125 standard is acceptable.

If there turns out to be a colour contrast problem in your design, you will need to improve the colour selection you’re using and re-test.

Caveats

The colour test and recommended limits suggested by the W3C and HP are in some ways limited. For instance, it is possible to create unreadable contrast combinations that do exceed the minimum limits. So, we suggest using the standards to check possible problematic contrast situations, but you still use common sense to identify and eliminate contrast situations that may not necessary be identified in the test

More Information

The standard from the New Zealand Government Web Standards v.1.0 – http://webstandards.govt.nz/index.php/Standard:2.2_Contrast_between_foreground_and_background_colours

Lighthouse International’s article “Effective Color Contrast” – http://www.lighthouse.org/accessibility/effective-color-contrast/

This entry was posted on Friday, October 3rd, 2008 at 11:08 am and is filed under random. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.