Daniel Convissor's Website

Setting Colors Properly in HTML

If you are designing web pages, here is a critical tidbit of information you may or may not know. If you are going to set any colors or background images on your page, you need to set all colors on the page. When I get to one of the thousands upon thousands of poorly coded pages, I send them the following canned message:

The following message is a canned response I send to all people in this particular situation, so please be open minded when reading this in order to interpret its meaning to the conditions on your site....

One or more of your pages has a light background color or image, though you have not put codes in your document to ensure all the text and link colors will contrast with the background. If a site is going to set any colors at all, colors need to be set for all items, including text, links, followed links and background.

I noticed this because I set the colors in my Netscape 3.0 browser preferences to have light text/links and a dark background. So, when I got to your page, my white text and green unfollowed links were impossible to read against your light background.

I'm not bitching for you to change you colors for me. Heck, I just changed my preferences to override any colors you set (though many people will just leave your site immediately). I mention this because, as a webmaster, you never know what web browser and user preferences are going to be used by people visiting your site. Thus, you either need to:

  1. leave all colors up to the person viewing the page, or
  2. set colors for all objects on that page.

This way, ANY person visiting that page will be able to read it instantly without having to adjust their web browser settings. Basically, you can't bank on the fact that everyone who looks at your site is going to have their text set to black and their links set to blue.

In the event your page has a background image, again, you should set the text, vlink and alink attributes. It's also good idea to also set the bgcolor, because the image is the last thing to load, so, this way, the text is still readable prior to the image loading. In addition, the background image may not even load for some reason or another.

Here's a sample of the HTML codes needed to do the trick, of course, you can select whatever colors you like:

<BODY BGCOLOR="#CCCCCC" TEXT="#000000" LINK="#0033CC" VLINK="#990033" ALINK="#006600" BACKGROUND="pictures/background-texture.jpg">

 

ColorMaker is a fantastic color setting tool in which you select the colors you like from a palate, and, if you so desire, have your own background image popped into it. Then it spits out a sample page and gives you the HTML body tag!

Similarly, if you are using graphics, make sure the background in them is not transparent. Set the background color of the image to be the same as the background color of the page. Thus, the items in the image will properly contrast with the background.

In addition, it's a good idea to have the color palate used in images stick to the 216 non dithered colors. These colors appear flat and clean, without speckles and other aberrations. William Johnston and Victor Engel both have pages explaining this better than I can.

 

While this is my pet peeve, I hope this note is taken as a helpful and informative critique, and not just a rant :)

 

This page is hosted by Daniel Convissor
Home Page: http://www.panix.com/~danielc/
Email: danielc@panix.com

This URL: http://www.panix.com/~danielc/colors.htm
Last updated: 7 April 1999