The Art of Contrast
4th January 2006 by Liam McGee
Poor contrast between text and background is one of the most common accessibility problems on websites, and one of the hardest to instantly diagnose. If you have normal vision, a mid grey on a white background may be perfectly readable, and it is often used to colour, for example, copyright information or links to privacy policies etc. For someone with a vision impairment, however, it can be impossible to read. As a general rule, the palest grey recommended for a white (#ffffff) background would be #797979 (this fails the W3C algorithm put passes the HP one — palest grey on a white background allowable under W3C guidelines is #585858).
It isn’t just greys, of course. Any colour you are using against another background needs to have sufficient contrast for vision impaired users. The W3C have developed algorithms to help choose contrasting hues and brightnesses, as have Hewlett Packard, and Jez Lemon has helpfully provided a contrast analyser based on these algorithms.
You may be dolefully considering picking through your stylesheets with a fine-tooth comb to work out foreground and background colours, but there is a quicker way. The excellent ColorZilla firefox extension gives you a handy pipette tool for checking colours. Go to your Firefox extensions (Tools > Extensions > Get more extensions) and search for the latest version of Colorzilla.
Happy colouring!