Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them (Interactive Technologies)

Blooper 55: Camouflaged Text

Text of any font size can be made difficult to read by placing it over a background that is heavily patterned or that contrasts poorly with the text color .

Text on Patterned Background

To see how a patterned page background can make text difficult to read, examine the mortgage calculator from the website of the Federal Reserve Bank of Chicago (Figure 8.7). The field labels in the calculator would be quite legible over a plain white background (see Avoiding the Blooper), but their legibility is greatly reduced by a patterned background, even a relatively faint one. In their zeal to give the calculator a background appropriate for home mortgages, the site's designers allowed graphic design considerations to supersede usability.

Figure 8.7: www.ChicagoFed.org (Feb. 2002)-Background of mortgage calculator makes it difficult to read the control labels.

Poor Contrast Between Text and Background

Even if the background of a Web page consists of a single solid color, the legibility of text displayed over it can be harmed by insufficient contrast between the text color and the background color. No one would expect users to be able to read text the same color as the background, ^[3] but some Web designers seem to expect users to read text that isn't very different from the background color.

Take Microsoft.com, for example, which often displays error messages in black text on a saturated red background (Figure 8.8). The red is of course to signal an error. Unfortunately, black text on a red background is devilishly difficult to read. The small (10-point) text font doesn't help.

Figure 8.8: www.Microsoft.com (Feb. 2001)-Poor contrast between text and background makes the text difficult to read.

A less-legible error message was displayed by the original website of candy vendor Russell Stover (Figure 8.9). Before the site was updated, its registration form displayed error messages in red on a dark blue-green background, making the message very hard to read.

Figure 8.9: www.RussellStover.com (Feb. 2001)-Red text on dark blue background.

Patterned Background and Poor Contrast

Because patterned backgrounds and poor color contrast are each common variations of this blooper, it is not surprising that some sites commit both variations. Two examples come from Angelfire.com, a portal and Web-hosting service, and Sciencenter.org, a science learning center in New York. Angelfire, in a subsite , puts white text over a rough brown background (Figure 8.10[A]). Sciencenter has a patterned blue background on all its pages, which not only degrades the legibility of the white text but also makes the blue link labels almost impossible to see (Figure 8.10[B]).

Figure 8.10: A- www.Angelfire.com (De. 2001); (b) Sciencenter.org (Sept. 2002)-Poor color contrast and patterned background.

Avoiding the Blooper

Assuming that a website's primary purpose is to convey information or to let users manipulate data, text on the site should be highly legible. To ensure that text is legible against its background, designers need only follow these guidelines:

• Use solid backgrounds. Avoid using patterned backgrounds under text. If you feel your site or certain pages of it absolutely must have patterned backgrounds, make them extremely faint, like watermarks, and design them to have large unpatterned areas over which you can place text.

• Dark on light beats light on dark. All other things being equal, dark text on a very light background is more legible than light text on a dark background due to perceptual "bleeding" from the background into the text. However, light text on a dark background can work if the contrast is great enough and the text is bold enough to withstand the "bleeding."

• Black on white is ideal. If legibility were the only concern, the best combination is black text on a white background. Of course, legibility is not the only concern: The Web would be far too bland if all text were black on white. It is, however, good to keep the ideal in mind when choosing text and background colors. Thus, for text, darker is better, and for backgrounds, lighter is better.

For example, the legibility of the text in the Federal Reserve Bank of Chicago's mortgage calculator can be improved by simply "bleaching" the background to white (Figure 8.11[B]). Compare that with the actual calculator (Figure 8.11[A]).

Figure 8.11: Correction of blooper at www.ChicagoFed.org - A- Actual design. (b) Improved white background.

Similarly, I can improve the legibility of Microsoft's error message while retaining the use of red to signal an error. I used red text on a white background instead of black text on a red background, and while I was at it, I increased the font size from 10 to 12 points (Figure 8.12). Compare the result to the actual Microsoft.com message (see Figure 8.8).

Figure 8.12: Correction of blooper at www.Microsoft.com -Improved contrast between text and background, while retaining use of red to signal an error.

Exception: Artistic Sites

Not all websites are primarily for conveying information or manipulating data. Some aim mainly to engage or entertain . According to graphic design expert Kevin Mullet, "Such sites leave a lot more latitude for the designer, since contrast levels may come into play as an aesthetic element, exploiting figure-ground ambiguity for artistic effect."

This of course refers to sites that are art or entertainment, rather than sites that present art or entertaining content. The latter are not an exception to the normal rules about text versus background, because people must be able to use the site efficiently .

^[3] In fact, Web designers sometimes use text that is the same color as the background, so search engines will find it (and use it to index the site) but human visitors will not.