According to the University of Washington’s Department of Ophthalmology, 2.8 million Americans have colour blindness, which can express itself in many variations and degrees of severity. Colour perception problems are important considerations when developing web sites to ensure that all users have access to the content and the functionality of sites.
What is sufficient colour contrast?
In Web Content Accessibility Guidelines 2.0, Guideline 1.4 reads:
Make it easier for users to see and hear content including separating foreground from background.
Focusing on visual presentation only, the intent of this guideline is to ensure sufficient contrast between the foreground colour (the text colour) and the background colour.
Based on the contrast ratio algorithm – a formula reminiscent of high school algebra, Level AA conformance requires text to have a contrast ratio of at least 4.5:1; larger text (18 point font or larger, or 14 point or larger if bold) a contrast ratio of at least 3:1. For Level AAA conformance, text requires a contrast ratio of at least 7:1; larger text a contrast ratio of at least 4.5:1. Incidental text or images of text that are not part of the user interface or are purely decorative and text that is part of a logo or brand are excluded from the colour contrast requirement
How is colour contrast checked?
Even though the formula for determining contrast ratio looks painful, the good news is tools exist to make this task pain free. Honest.
My favourite is the Colour Contrast Analyzer on the Web Accessibility Toolbar, Version 2.0 (for Internet Explorer):
The Contrast Analyzer is also available as a stand alone application for the PC or the Mac, and can be used to analyze colour in any program; for example, checking the colour ratio of headings in a word document.
Using the analyzer application, the contrast between a foreground colour and a background colour can be tested one of four ways (shown in the screen shot to the right):
- Selecting the colour from a drop down box,
- Entering the HEX code,
- Using the eyedropper to choose a colour from the webpage or anywhere, or
- Using the red-green-blue sliders.
Results for the four tests are given as either a pass or fail:
- Level AA text requires a minimum contrast ratio of 4.5:1 to pass
- Level AAA text – 7:1
- Level AA large text – 3:1
- Level AAA large text – 4.5:1
How does the DC.gov site fare?
Following up on Jim Thatcher’s assessment of DC.gov, I tested several colour combinations found on the home page:
On the left sidebar:
- red text on light blue background: contrast ratio of 4.7:1, fails 3 out of 4 tests
- dark blue on light blue: 7.8:1, 4 passes
- black on light blue: 16.9:1, 4 passes
In the main content:
- black on white: 21:1, 4 passes
- dark blue on white: 9.7:1, 4 passes
On the right sidebar:
- Red on beige: 4.6:1; 3 fails
- Blue on beige: 7.5:1, 4 passes
Clearly, the DC.gov site needs a colour scheme makeover to increase readability for US residents who are colour blind, have low vision or aging eyes.
if that is the case. we must consider the factors and the range on how to come up with a website design that is readable by color blinds but still effective on getting attention to its readers.
More than Alive