Blogzilla - A web design oriented weblog by Izilla Web Development, Newcastle and Sydney, NSW Australia

Consideration of colour contrast is important when designing a website layout. Poor contrast can result in accessibility issues for your visually impaired visitors. How can we avoid making this mistake?

Color brightness formula

A suitable difference between background and foreground colours can be calculated. Here’s how.

The formula suggested by the World Wide Web Consortium (W3C) to determine the brightness of a colour is:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Two colours provide approved colour visibility if the brightness difference is greater than 125 and the color difference is greater than 500.

Why should I be concerned with this?

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

Wait a second, that’s a lot of work for me to do!

No not necessarily, several tools are available.

Accesskeys.org’s AccessColor tool

"AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. Assuring that you provide enough color contrast between foreground and background colors takes time and we hope that this tool will help web developers to build accessible websites by visually flagging the section(s) of a page with problematic color combinations. AccessColor will find the relevant colour combinations within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each colour combination." - Source http://www.accesskeys.org.

The AccessColor online tool can be located here - http://www.accesskeys.org/tools/color-contrast.html.

Matt Stow’s (Izilla Senior Designer) Fireworks Contrast Extension

"To assist designers with meeting the WCAG requirement, I have created two commands that allow you to compare the contrast of the fills of two vector objects, or compare two colours chosen from the colour picker."

Download Matt’s Fireworks tool here - Fireworks Contrast Extension Analyser Tool.

Vision Australia’s Colour Contrast Analyser

"The Colour Contrast Analyser (CCA) is useful to help determine, in particular, the legibility of text on a web page and the legibility of image based representations of text." - Source http://www.visionaustralia.org.au.

Vision Australia’s tool can be downloaded from the following link - http://www.visionaustralia.org.au/info.aspx?page=628.