In my Evaluating the User Interface and User Experience presentation at the Boston Design 4 Drupal camp, I touched on the need for designers to check the color contrast between foreground and background page elements, to ensure the color combination is usable and accessible to all. I know there are tools that can analyze colors in Photoshop and Fireworks files, but after the pages is in CSS, the best tool that I have used is Juicy Studio's Colour Contrast Analyser, a Firefox extension.

A few weeks ago, I applied a premium theme to my site, and then during the run-up to the Design 4 Drupal camp, I never had time to verify the default CSS. Imagine my surprise when my site had over 15 fails with the Colour Contrast Analyser! I'm now in the process of tweaking the CSS to provide color contrast that actually pass, as well as implement some more best practices on inline and navigational links. Sometimes I find these themes are overly-designed and miss out on basic usability.

At least it gives me an opportunity to play around with CSS, which I quite like.

UPDATE: http://www.checkmycolours.com also provides color contrast testing on live websites. Unfortunately, it finds double the failures on my site than the Colour Contrast Analyser. I have much work to do but I'd like to get a full set of passes on both tools.