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.
