WWW Colors and Readability

Are you Me too! And I'm tired of looking at pages I can't read. So if you want to make your pages usable by the largest possible audience, this page may help.

How do I make my pages colorful but presentable?

If you're really set on using color, then let me remind you:

So be careful! Really, really careful.

Step 1: Set the Colors

Read Netscape's page on how to control the background and foregrounds of your documents: http://home.mcom.com/assist/net_sites/bg/index.html.

Be sure to set all of the colors: BGCOLOR, LINK, VLINK, and ALINK. If you forget one then it's default color may be invisible against your background or foreground color. Pick colours that differ in INTENSITY for text and background, and HUE for emphasis. Don't use HUE to provide contrast between foreground and background.

Step 2: Picking Colors: Hexadecimal Red-Green-Blue Triplets

Pick your colors using:

Step 3: Check for Contrast

The quickest way to see if you have enough contrast between your foreground (text) and your background colours is to look at them in black and white.

Take a look at http://www.cs.ubc.cs/~harrison/Pictures/htmlrgb-bw.gif to predict if your color choices will have enough contrast.

You can also switch your display into black and white mode to check if the colors will be translated into black and white reasonably. Using a grey-scale setting is also a good way to make sure that your pages will have enough contrast. Not everyone is using exactly the same monitor, computer, browser, eyes, or room illumination as you are, so take a couple of minutes to pick colors that have high contrast and are distinguishable. Pick colours with large differences in luminance for good constrast. Avoid shaded background images that alter the contrast across (or down) the page.

So check that the colors selected aren't going to result in text (TEXT, LINK, VLINK, and ALINK) and background (BGCOLOR) colors that will produce unreadable pages. And warn your users if that's the case. Thanks!

Black Thursday

If you want to set your background black for "Black Thursday" or to protest the passing of the communications indecency act in the U.S.A. Then use this tag:
<;BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9999FF" VLINK="#FF99FF" ALINK="#99999ff">

View the source of this document to see where to put the tag in your document.

Note: People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

While web surfers can adjust their room lighting and monitor brightness, "PowerPoint" audiences cannot. You have a choice of creating slides that are "bright and readable" but also perhaps "too bright and hazy" or slides that are "dark and fuzzy" but also "crisp".

In any case, much of this is subjective, and you will unfortunately find audience members who are outspoken about either choice. Your best bet is to provide enough luminance contrast between your foreground and background that the text can be read easily, pick colours that go well together (and with your media), and use fonts that are clear and uncluttered.

A Final Word

This is http://www.cs.ubc.ca/~harrison/document-colors.html.
Maintained by Jason Harrison (harrison@cs.ubc.ca)
Last modified: Mon Sep 16 15:10:22 2002.