Coordinate Your Colors

Even if you're not fashion conscious, you probably avoid wearing colors that clash. So why aren't we as careful when it comes to our Web sites?

We all use color to add spice to our Web pages. Without color, a page is bland and isn't very like to grab the average Web surfer.

Color is also important for emphasizing the most important parts of our page. Remember that the purpose of Web design is to draw the visitor's eye to key page elements. Ideally your visitors should be able to take in the page at a glance, with their eyes locking on the most important things. Colored table cells, colored text, and colored graphics are all good ways to draw attention.

But color can get you into trouble too. Too often you see poorly designed Web pages where badly chosen colors detract from the overall design. If you surf the Web enough, sooner or later you'll find a page that's almost unreadable because it sets dark colors on a dark background.

You can avoid this sort of problem by applying some basic rules about using color.

Choose colors that contrast

Try to use colors that play well together. This can be hard to do when pulling colors from the browser-safe color palette. A good resource to test how well colors match is the Webmaster's Color Laboratory from Visibone. This site allows you to place color swatches next to each other to see how they work together. The site also has an excellent guide to the browser-safe pallet.

Another excellent resource for testing the legibility of your color combinations is ZSPC's Super Color Chart. This tool allows you to select a background color and place fonts of different color, size, and type face on top of it.

Use color discreetly

According to the Microsoft resource, black on yellow is a good color combination. Does that mean you should use these as the text and background colors for your page? Not really. It means that your eye is quickly drawn the bright yellow, and the black text is easily readable against that background. So the black/yellow combination is good for emphasizing some portion of your page. For example, you might use it to highlight section headings in a navigation bar or in a pull quote.

But you should avoid using combinations like this as the basis for all the text on your page, precisely because your eye is drawn to it so readily. Using this combination across an entire page is like shouting at your visitors.

Though it's not explicitly stated, the Microsoft page recommends using black on white as your text/background colors, with green on white, red on white, and blue on white being used to emphasize parts of your text. Doing this makes your body text legible, and allows you to highlight key points with color.

Avoid fancy tiled backgrounds

There's nothing inherently wrong with using a tiled GIF for your page's background. But noisy tiled backgrounds too often distract from the page, making it hard to read.

Tiled backgrounds are a neat effect, so it's tempting to use them. This is probably the most common mistake for beginning Web page builders. More often than not these backgrounds just hurt your page. That's especially true of square backgrounds that tile both horizontally and vertically.

When in doubt, use black on white

Name your three favorite commercial Web sites. Now take a look at them. Most likely you'll find they use black text on a white background. There's a good reason: it's legible and it keeps the presentation of the text from distracting from its content.

What you see may not be what they get

Keep in mind that, on the Web, you can never guarantee exactly how a computer will display a color. A Macintosh will render colors a shade brighter than a PC, and different PC monitors will likewise vary by a shade. So don't become fixated on getting a color just the way you like it. As with most things on the Web, it's best to test your colors by viewing your page on several different computers, then chose the color that works the best on the most machines.

Rate This Tip:
Not Useful Useful Very Useful   

Copyright by Steve Nearman (The Master's Touch - 2003- all rights
reserved. No part of this web site can be reproduced in any form without written permission.