"Sufficient" color contrast

One of the best ways to contribute to a discussion about color in design is to establish and refer to some objective standards on color contrast. If you're confronted by light gray text on a dark gray background, don't have just another opinion.  Instead, agree on what color contrast is sufficient, and then enforce it if necessary.

If you're working on the web, the W3C suggests a formula for "sufficient" color contrast.  You can turn to a couple of online tools to avoid doing the math.

This tool complies with the W3C standards:
http://etre.com/tools/colourcheck/

The popular HP color checking tool is less strict on color difference:
http://www.hp.com/hpinfo/abouthp/accessibility/webaccessibility/color_tool.html

In the image below, the color contrast is less than what the W3C requires, but enough for HP.  My eyes find it a bit difficult to read, but your display and eyesight might differ.

Note that these tools show contrast levels sufficient only for people with normal vision.  If your audience includes a high proportion of people with vision deficiencies, insist on greater contrast.

Comments

[Ruben's usability]

Great tip, thanks! The color blue you use for links is not contrasty enough by the way ;) (especially when used in xxxsmall font type as in the right navigation bar! :))

Thanks for the comment. I have enlarged the right column text, and changed the link color to a darker blue. Please let me know what you think now.