1. C ritique Web Page Des ign
Wal
lp ap e
rs
C o lo rs ds
un
g ro
B ac k
C ompetency 6.02

2. Web S ite C olors
 Printing color is expensive so color is used
sparingly in the printed media.
 Color is virtually free on the web so web
designers can incorporate any amount of
color that is appropriate for their sites.
 Color should be used to set the mood of
a site and to achieve a purpose.
 Too much color variety can obscure, rather
than clarify the site’s message.
 Color features should enhance your
website—not distract.

3. B ackground and Foreground
C olors
 Light on dark or dark on light works best for text. See
below:
This is a good example This is a bad example
This is a good example This is a bad example
This is a good example This is a bad example
This is a good example This is a bad example
 Contrast between the background and foreground must
be considered when selecting color. Generally, light on dark,
or dark on light works well.
 Color blind people cannot distinguish red/black or
green/black combinations. So avoid these combinations,
even though they may look okay to you.
 A light text on a dark background may not print.
 White text on a black page usually does not print.
 Use harmonizing color schemes and contrasting colors
for text.

4. Background Colors
 Mid tone grey background with dark text will be best
for most eyes.
 Bright white and light colored backgrounds are hard
on most eyes.
 Certain color combinations are difficult to read:
• Red type on blue background or black on dark
grey background. Adequate contract between
background and text (foreground) is needed.
• A background that differs from the foreground
text only in color and not in brightness can strain
the eyes.

5. S electing C olors
Color and how it is perceived are both very technical and
complex subjects. People perceive color differently:
o Red seems to be almost universal in marking
something that is important.
o Colors can also set the mood of your website:
Red Generates energy and excitement
Green Encourages people to think
Yellow Signifies optimism and confidence
Blue Relaxes and calms by lowering blood pressure and
pulse rate, so too much blue can impair
concentration
o Other colors often depend on culture and even on the
user’s personal experiences.
o Age of the site’s target market can also help to
determine colors choices.

6. B rows er-S afe C olor Palette
 Monitors support at least 24-bit color with most
supporting a 32-bit.
 A 24-bit color monitors can display 16.7 million colors
and are considered browser-safe.
 RGB colors must be converted to hexadecimal system
numbers to use in a web site. These can be converted
on the computer’s calculator or on several free site on
the Internet.
 Color monitors have three colors in each pixel (Red,
Green, and Blue)
o Visit the site below to converts RGB to
Hexadecimals:
http://www.webdesigns2000.com/WebPage
o Tutorial for RGB and hexadecimals:
http://www.htmlcenter.com/tutorials/tutorials

7. Wallpaper
 Websites often use wallpaper (background design).
 Using wallpaper requires the designer to be more
careful with the selection of text, colors, and textures
to maintain optimal readability.
This is a good
example
This is a good example
This is a good example
This is not a good example—especially if graphics
are being used in the web site.

8. Wallpaper continued…
 Using distinct patterns usually results in pages that are
difficult to read and have too much distraction.
 Wallpaper may be pretty by itself but doesn’t work with
text on its foreground.
 Slightly embossed patterns make very tasteful, rich
looking pages.
 Pictures and animated GIF’s should not be used as
wallpaper because they create too much distraction.
 Test the results of different blends of background with
different text to be sure they are legible.
 If your web site has pages that viewers may want to copy,
be careful with colors and background selections.

9. Wallpaper continued…
Graphics and Join us for the
photographs are next meeting of
not acceptable FBLA.
as wallpaper…
because they
make text
difficult to read
when it is
fighting the busy WCU Cheerleaders earns 2nd in
background. UCA’s National Championship.

10. Links
 To make followed and un-followed links easier to read,
color should be added. The code is listed below with
the response:
 LINK=link color
 ALINK=link color when mouse moves over the
text
 VLINK=link color after viewing the followed
hyperlink page
 When using graphics as links, give the same
consideration for all graphics used in the site.
Click here to view CNN.com Original color
Click here to view CNN.com Color when mouse moves
over link
Click here to view CNN.com Color after returning from
visiting CNN

11. KIS S
 Keep
 It
 Simple &
 Short
 Remember “Kiss” when you are
designing a website!