This was in an e-mail I received from Webreference. I didn’t see a link for it, but I didn’t want to lose it. I think it’s an interesting read.
Web Designing: Color It Right
Making color choices for your Web design is a matter of choosing what’s
appropriate, applicable, and interesting for your potential visitors. You
don’t want your visitors feeling miserable about your Web site’s color
choices and patterns, do you?
Planning and organizing your color usage as you go about designing your Web
sites should not be overlooked. Don’t just go about it with a trial-and-
error attitude. Here are some of the best practices with regards to
applying color in Web design. Read this and get a head-start in capturing
the eyes (if not the hearts and minds) of your prospective users.
Regarding the Use of Color and Pattern
Make it a point that your color choices are flexible enough that they can
easily be changed depending on your user’s browser settings and assistive
technology. It is good to establish a strong contrast between the
background color and the text color; however, lest you intentionally want
your users to get dizzy, don’t use patterned or textured backgrounds behind
the texts. Solid and plain text backgrounds are well and good. On-screen
patterns need to be put in the center.
Do not rely heavily on color connotations in guiding your users regarding
important information. Color coding as an additional way to identify
different elements and site navigation can be fun and amusing. But avoid
using too many different colors simultaneously. Be consistent and have
limitations in the number of colors you’re color coding.
Regarding Choices in Color
The safest, more legible and professionallooking combination is black text
on a white background. For maximum visibility with regards to the average
human eye’s capabilities, red and green turn out good when in the center of
the screen; black, white, yellow, and blue are very useful on the
periphery. If your intent is to identify two groups of content, do not use
red and green combination. Always consider that the most common color
blindness is that of red/green blindness. This precaution also applies with
the blue and yellow combination. Keep in mind that 12% of men have
blue/yellow color blindness.
In drawing the fully sighted user’s attention, red and other vivid colors
may serve your purpose. Other brighter colors are also very good for a
screen-based interface that will be viewed for a long period of time. These
colors are also applicable for older users. When you want the colors to be
distinct from each other, darker shades of blue, red, and purple and paler
shades of green, yellow, and orange are good choices.
Use the colors to say something about your Web site or company. Brighter
colors, i.e., a yellow background color, can be used to highlight low
prices and bargains. Colors that are good for businesses are beige, blue,
burgundy, and dark green against a white or very light background. Do not
make it a habit of using greyscales for important diagrams. It is also not
healthy to user different shades of blue simultaneously. Do not make your
design look amateurish by using fluorescent-type colors for highlighting.
In pairing colors together, be sure to consult a color wheel chart first.
Combining two colors from the opposite ends of the color chart and high
chroma colors may result in giving your users a headache rather than
getting their approval.
Regarding Different Viewing Environments
When you’re in low light viewing conditions, use light text, thin lines,
and small shapes in white yellow or red. Have a medium-dark background like
blue, green, red or grey. Prepare lower chroma for video displays, too. If
you’re working in bright conditions, then apply dark text, thin lines, and
small shapes in blue or black. White, pale yellow, magenta, green or blue
are preferable backgrounds.
These are guidelines based on practical experiences. Still, you must get
wind of your users reactions and comments for that is the ultimate test.
Kay Zetkin
kzetkin02@gmail.com
http://www.colorprintingwholesale.com/
