Blog category

Are you colour contrasts accessible?

October 26, 2008

Probably the most notable issue regarding accessible colours is to what extent the colour is discernible to a colour-blind person. Hence it is not advisable to rely on colour alone as a means of conveying information. But web designers should also consider how well foreground and background colours work together. If they are too close they may not provide enough contrast. Do you know if the colour contrasts on your pages comply with the guidelines?

The WCAG 1.0 guidelines state the following:

“ 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].”

WCAG 2.0 is much more specific:

“1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 5:1 (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 (Level AAA)”

In both cases this does not apply to large print, incidental text and logotypes.

So what is the contrast ratio? The WCAG 2.0 definition is:

“(L1 + 0.05) / (L2 + 0.05)”

where L1 is the relative luminance of the lighter of the colours and L2 is the relative luminance of the darker of the colours.

And that begs the next question – what is relative luminance? Rather than reprint the whole formula, here is the WCAG 2.0 defintion. Needless to say, you can’t be expected to plough that lot every time you want to assign foreground and background colours.

Fortunately, the WCAG 2.0 guidelines provide a list of resources to make life easier.

My own particular favourite tool is the Colour Contrast Analyser from Vision Australia (Windows only). The only minor problem being that this works on an earlier WCAG 2.0 ratio of 10:1 for triple-A compliance. But it’s still a useful, user-friendly tool that does the job very well.

To put a realistic slant on the whole subject, I would say don’t be a slave to those ratios. If you colour contrasts are very close, then you should rest easy. But if they’re not close, the look again at your colours.

So despite the complexity of the definitions, there is really no excuse for not using colour contrasts that will be generally accessible.

Filed in: Accessibility