(Or Colours for Canadians and British)
[<== Previous] | [Up] | [Next ==>]
The Web has long since evolved from its beginnings in which all Web pages
were rendered in a single color chosen by the browser (for which Netscape,
for some inexplicable reason, chose a really ugly gray as the default
background, at least prior to version 4.0 which, at least in the Windows
version, uses the system default window color which is usually white).
Web developers can now specify colors for text, backgrounds,
and links, and change colors for different parts of a document. However,
some guidelines should be followed in using the color attributes to
avoid making pages unreadable under some user-default settings or in some
When I first wrote this page, Cascading Style Sheets were still unsupported or poorly
supported by most browsers in wide use, so I made little mention of them and gave examples
using the now-deprecated tags and attributes for specifying colors within the HTML code.
Now stylesheets are much better supported -- even bug-ridden browsers like Netscape 4 which
had problems with complex uses of stylesheets for layout and positioning worked OK with stylesheet
elements for suggesting colors; and that generation of browsers has long since vanished, yielding
to others with much better CSS support. Hence, I currently suggest using stylesheets for colors, and
do so in my own pages, though I haven't taken the totally-purist route and eliminated all
presentational attributes and layout tables. However, I'll keep my
discussion of the HTML color attributes here for reference and historical interest. Many of my
notes and cautions apply just as well to specifying colors by stylesheet as in HTML code, anyway.
I'm trying to remedy my omission by adding some CSS examples as well, in addition to general discussion
of the use of stylesheets vs. other methods of suggesting presentation, but it is rather more difficult
to explain CSS than to give HTML tag examples, as, after all, CSS is a whole new language. I suggest
you read a book or tutorial on CSS to learn how to use it; these brief tips can't do it justice.
<BODY BGCOLOR="#FFFFFF" LINK="#000077" text="#000000" vlink="#990000"
You can set the background color, text color, color of unvisited links,
color of visited links, and color of links while they're being selected
ALINK attributes respectively.
These go in the
BODY tag before the main content of your page (but
HEAD section). There should be only one
BODY tag per
page; the use of multiple
BODY tags to produce color-change effects
worked in some old versions of Netscape, but then stopped working, and
was never a standard usage. (
BODY is an element with an opening tag and
</BODY> tag, containing the main body of the page within these
tags. It's not a "formatting command" that changes the page colors when it's encountered,
as those early Netscape versions seemed to interpret it.)
Each of these colors is set using a six-digit hexadecimal (base 16) number
with the first two digits representing the intensity of red, the next two
the intensity of green, and the last two the intensity of blue. Hence
#FF0000 is bright red,
#00FF00 is bright green,
#FFFFFF is white,
#000000 is black. The use of color names ("Red", etc.) is allowed
also, with a limited repertoire of "standard" names (and a few nonstandard ones supported by some browser
or other), but the hex codes are "safest" in that they're supported by all browsers that support color at all,
and have a fixed predictable value.
Note that the syntax of these attributes requires that each hexadecimal color
specification begin with a number/pound/hash/tic-tac-toe sign (#), and be
surrounded with quotes (").
TIP: Set all
color attributes if you set any of them! And be sure to set all color
BGCOLOR, if you use a background
If you set one of these attributes, you should set all of them. Otherwise,
the user's settings for other colors may clash with the one(s) you set.
For instance, if you set a black background but don't set a text color,
the common default text color of black will be used for most users,
producing invisible text. I've actually seen Web pages that did this:
usually, they either had nothing but graphics (so the designer didn't think
a text color was needed) or they used FONT attributes to set the text
color for each section of text. But if graphic-loading is turned off, the
user will find that the ALT text is invisible,
and users of browsers that don't support the FONT tag will also be unable
to read the text.
To avoid such problems, use a full set of colors that work well
with one another. If you use a background graphic (
set the text and link colors to look well against the graphic, and set
a background color (
BGCOLOR="value") that is similar to the predominant
color of the graphic so that if the user turns off graphic loading, or if
the graphic hasn't loaded yet, the text is visible.
Even with a more "innocuous" background like white, you should set the text
and link colors, in case the user has set white or a light color as their
When choosing colors for non-visited and visited links, remember that the
normal standard is for links to be blue when they haven't been visited
yet, and either a darker blue or red when they have; if you pick colors greatly divergent from this
you're likely to confuse users. If you pick link colors that are too
similar to the text color, or visited and non-visited link colors that
are identical, you'll remove visual cues that users are accustomed to having
to distinguish these things. Avoid this unless your site has the confusion
of users as an explicit aim.
Using CSS Instead
Cascading Stylesheets give much more versatile control over color suggestions
for different types of links, allowing you to set up multiple classes of links with different
colors, as well as supporting a "hover" state where links turn a different color (possibly with
a colored background) while the mouse is over them. As with all "neat features", this can be
used to good and bad effect. Try to avoid going too wild with varying colors on links which can
make the user totally perplexed as to which color represents a visited link in this part of this
page. However, if you have different sections of a page with different backgrounds, you might need
link colors that show up well in each part, so you should define multiple classes, and do, for instance,
<A class="menubar" href="page.html"> to indicate for each link what class it's
part of -- then your stylesheet will have different rules for each, like this:
TIP: In most cases, black backgrounds are not a good idea.
There have been some times and places where it's considered "trendy" to use
black backgrounds on Web pages. For a while, many pages were black to protest
the Communications Decency Act (since declared unconstitutional), but many other
authors used black backgrounds regularly in non-protest sites, especially sites
related to computer games. But there are some problems with this. If users try
to print such a site out, they may find that browsers ignore the background color
in printing but set the foreground color, which is usually white or another light
color that doesn't show up well (or at all) against white paper. If your browser's
print routine does honor background colors and prints the page as white-on-black,
that will use up lots of printer ink and be likely to smudge into unreadability.
So, on any page that you think people will want to print, I'd suggest you avoid
white-on-black color schemes and stick to a scheme that uses a dark color for the
If you're trying to print a black-background site yourself, try setting the browser
configuration to "ignore document colors" and use the browser defaults; this may
produce a printable document. (Then again, if the page uses
settings to set text to light colors, they may still not show up well, since many browsers
still set font colors even if you configure them to ignore author color settings.)
Once again, stylesheets prove to be the better solution, since if all colors (including black
backgrounds) are specified by stylesheet, the user can turn off stylesheets and view and print the
document in normal default colors -- that is, if the author was consistent and specified
all colors by stylesheet, instead of a messy mixture where perhaps the black background was
set by stylesheet but the white text on it was specified by
FONT tags, resulting in
an unreadable page if stylesheets are disabled.
TIP: Use the
FONT COLOR attribute
with great care, if ever, due to its large potential for mischief. (Nowadays, you really don't have
any need for this attribute at all, given the option of using stylesheets instead.)
If you should happen to use this attribute anyway, you can set a color for a particular piece of text using the
<FONT COLOR="red"> Here it's OK to use
color names (standard colors: aqua, black, blue,
green, lime, maroon,
silver, teal, white, and yellow), since by the
time the FONT tag was implemented these color names were also in place.
You can use hexadecimal codes too, if you choose.
ends the color-changed text block.
Use such color changes with great caution. Older browsers don't support this feature (though by now these are positively prehistoric), so
don't depend on any of your meaning being conveyed by font color alone;
if you need to denote a piece of text as highlighted, be sure to
use a tag like
<STRONG> in addition to the color
change. Be sure to pick colors that look good against the background
color of the page. Don't use font color changes if you didn't explicitly
set a background color, since the user's default may clash with the
changed text color. And be aware that the user can override your
settings for normal background and text colors, but font color changes
will still be shown in most browsers. This may produce unreadable sections.
Due to such problems, many purists denounce the use of the
altogether. I used to use it on occasion, but not a lot; I've since replaced
such uses with stylesheets in order to produce more logically-structured and
browser-friendly color effects.
Also note that the
FONT tag (and stylesheet effects, for that
matter) can be used in ways that confuse
the user; since blue text is usually a link, the use of that color for
anything else can be distracting, especially if you combine it with
<U> (Underline) tag to produce text
that's not a link but sure looks like it!
Table Background Colors
TIP: Watch out for table background colors that clash
with the page's standard text color!
In some browsers you can set a background color for a table or
an element of one, by adding a
BGCOLOR="value" attribute to
TD tag. This can be used for
some nice effects, but it requires considerable caution because there are
some browser versions that don't support this but do support text color
changes via the
FONT tag. Thus, for instance, if within a
page like this one with black text on white background you create a table
with a dark background, and set the text to white with a
tag, it will look nice in newer browsers, but the white-on-white text will
be unreadable in some other versions! (Look at the example below to see
in what category your browser falls.) To be totally safe, use
text colors within tables that will show up against both your table
background color and the regular page background color.
If you can read this, you're lucky!
NOTE: Table background colors are just one of a number of color-changing features
that were inaugurated in different browser versions. For instance, Netscape 1.x supported
BODY color attributes
FONT colors; Netscape 2.x supported
FONT colors but not
TABLE backgrounds; Netscape 3.x supported
but not stylesheets; Netscape 4.x supported stylesheets (though not very well);
and Netscape 6.x (their "marketing types" skipped 5.x) supports the full standards of
HTML and CSS. Using several of these features in
combination can produce unreadable pages on browsers that don't support all of them.
If you do all of your color settings in stylesheets, that will produce the
most accessible page, as the entire stylesheet will be
ignored by a browser that doesn't support stylesheets, so you don't have the problem of
some of the colors taking effect and not others -- pages with stylesheets may look plain on
older browsers, but they "degrade gracefully" in the sense that they remain readable. On the
other hand, the "cascading" nature of styesheets means that users can override parts
of your stylesheet with a user stylesheet, possibly producing clashing color combinations.
[<== Previous] | [Up] | [Next ==>]
This page was first created 15 Jul 1997, and was last modified 31 Oct 2014.
Copyright © 1997-2014 by Daniel R. Tobias. All rights reserved.