Hiding in Plain Sight

Make sure your web graphics don't camouflage your message

By Donald Day

Introduction

Cool images and backgrounds make websites exciting. But what if you run text over those graphics? If you're not careful, no one will read it — or even see it. No site can work without text, so some text inevitably ends up on top of images. And that's where the fun begins. This column gives you tips for navigating the visual contrast minefield and keeping your designs working for you.

To Serif or not to Serif?

One factor affecting text legibility is the use of a typeface with serifs. This is a key factor in type-to-background contrast, which affects readability. Serifs appear at right angles to the main strokes of characters, so they help readers distinguish characters from the background.

The depth of descenders and height of ascenders also affects text legibility. Descenders plunge lower than the invisible baseline the eye perceives beneath the main parts of characters. Ascenders poke above another invisible line along the tops of characters. (For example, in this sentence the "h" in "this" has an ascender, and the "p" in "example" has a descender.) Your eyes use these features to distinguish characters. Typefaces with small descenders and ascenders are harder to read.

Color, color everywhere

Web page designers can select from 216 colors (http://html-color-codes.com/) for use either as background or foreground. The possible combinations of adjacent colors are astronomical. Many potential combinations of colors are disastrous.

Two aspects of color are critical when you design a website: saturation and hue. "Hue" means the same thing as "color," as the word is commonly understood. Certain colors complement one another, therefore clash when adjacent; other colors are not complementary, therefore coexist peacefully. Combining hues that clash is all right if that’s what you intend, to attract attention. But, often websites are garish entirely by accident.

Saturation is the apparent density of a color. If a saturated foreground element (e.g., text) is placed over a saturated background in another color, the result will impede viewing and may actually create 'op-art' that causes the edges of images to visually vibrate. You also can have problems if you place an element in the foreground with a color very similar to that in its background. The foreground element will be virtually unreadable because it can’t be distinguished from the background.

The devil is in the details

Problems arise when designers choose highly detailed (especially photographic) images as backgrounds. When text is overlaid as foreground, the background competes with the viewer's ability to distinguish the text. The eye tends to follow the pattern of the background rather than continuing forward in the text. Highly detailed, photographic background images break up overlaid text, making it very hard to read.

Note how the background impairs the readability of these pages by competing with or obscuring the text:

Published 05/04/2001