Respecting Color Contrast in Web Design

It’s no secret that there are some unique characteristics surrounding Web design as a medium. We as designers pride ourselves on embracing the various limitations that come bundled with the Web and using them to our advantage.

One inescapable limitation from which we’ll never be able to escape is that of color contrast. While it’s only obvious to ensure you’re working within acceptable limitations of color contrast in the general sense of design, we have even more to contend with. Our designs must be equally readable in a myriad of situations.

Sure, print designers need to worry about what their piece is going to look like in various lighting conditions, or how a digital file will translate to something physical. There is a lot to consider as far as the method of printing as well as the material itself. Web design brings something completely new to the table; monitors.

The trouble with contrast: monitors

Even if you’re new to Web design, it won’t take long to realize that contrast is something that never goes away. Even when you’ve got a solid grasp on limitations, and you piece together a design specifically surrounding color contrast on the Web, your client will request the type be a bit darker & bold. Unfortunately, client intervention doesn’t tie directly to this issue, so we’ll move on.

Computer hardware has a tendency of following the adage “you get what you pay for.” Unfortunately, when it comes to many people and computers; the cheaper the better. Bargain equipment is very attractive for a number of reasons, none of which we’ll need to explore at this time. What does matter to us, is that many of the monitors on which your design will be displayed are of much less quality than yours. Your gradients will be less noticeable, your drop shadows nearly nonexistent, and your type more difficult to read.

It seems dismal, but Web designers need to account for the worst case scenario, or very close to it. We have the responsibility of producing work which is not only usable, versatile, aesthetically pleasing, standardized, valid, and optimized, but also beautiful on substandard equipment.

Keeping your contrast in check

There are quite a few tools available for testing your color contrast. There have been many articles written on the subject as well. Some fantastic research has been performed, allowing us to easily observe our color contrast and measure it against accepted values.

I have a tool that I’ve come to know and love in testing color contrast. Color Contrast Check by everyone’s favorite, Jonathan Snook, has come out on top for me. His tool conforms to accepted standards, and allows designers to very easily check to see how the contrast measures up.

There are many other tools available for checking color contrast, which do you use?