Dan's Web Tips:

Colors
(Or Colours for Canadians and British)

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 browsers.

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 Tag

<BODY BGCOLOR="#FFFFFF" LINK="#000077" text="#000000" vlink="#990000"
 ALINK="#FF0000">

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 with the BGCOLOR, TEXT, LINK, VLINK, and ALINK attributes respectively. These go in the BODY tag before the main content of your page (but after the 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 a closing </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, and #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 BODY color attributes if you set any of them! And be sure to set all color attributes, including BGCOLOR, if you use a background graphic.

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 (BACKGROUND="filename"), 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 text color.

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:

.menubar { background-color: #017499; color: #EAF4F6; } A.menubar:link { color: white; } A.menubar:visited { color: lime; } A.menubar:hover { color: aqua; } a.menubar:active { background-color: yellow; color: red; }

Black Backgrounds

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 text.

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.

FONT Tags

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 tag as follows:  Here it's OK to use color names (standard colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, 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  or  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 FONT tag 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 the  (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 the TABLE or 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 FONT 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 but not FONT colors; Netscape 2.x supported FONT colors but not TABLE backgrounds; Netscape 3.x supported TABLE backgrounds 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.