When I read Kevin Hale’s article “Calculating Color Contrast for Legible Text” yesterday, I was reminded of the fact that some colors just don’t work well with other colors.

It might just be me and my old age and the fact that I’m male, but there’s something very disturbing about the new “orange links on green background” in Monster.com
’s newly re-designed HTML e-mail for job search results.
This is not the first time, of course, that we’ve seen clashing colors on the web. And it certainly won’t be the last. Moreover, you would think that some of the accessibility hype of late would translate into better designed web pages & web components for everyone. Sure, the links are accessible and even underlined (and I’m fairly positive they work just splendidly in a screen reader for end users with vision problems). The problem is that there’s not enough contrast between the orange and the green.
Much to my dismay, even one of my favorite webmaster resources, VisiBone
, can display some very disturbing color combinations on their Webmaster’s Color Laboratory
:

That just goes to show that hard-coding orange, pink and brown text could get you into a bit of trouble, if the background can be randomly changed to orange, pink and brown as well.
Don’t get me wrong: I’m not knocking the hard work of others; I’m merely contemplating on the challenges that web design has to offer, even in 2008. (Either that or I’m getting color-blind.)
In all seriousness, though, even if you’re under deadline pressure, or if you are a one-person web shop, run your work past a couple of co-workers and see what they think. Make it easy for them to comment on any spect of your work, without getting defensive or cynical. In the end, everybody wins.
Additional Resources:
A Guide to Combining Colors & Color Schemes for Great Web Design
Eric Meyer’s Color Blender
Simply Graphix Color Combinations
JavaScript Color Picker