Provide good contrast between text and background

In the early days of desktop publishing, we talked about the "ransom note" effect - with so many different fonts and colors on the page that you couldn't tell what went with what.

In the early days of the web, we saw the same phenomenon - an exuberance of design that made for colorful, but not usable, web pages. And a common problem with those web pages was a colored or patterned background that made the text virtually unreadable.

Design exuberance can still be wonderful - if it matches the personality of your site. But it has to work with and not against the content. If you want people to read what you are putting on the web, you have to make it legible. Legibility requires high contrast between text and background.

Keep the background clear so that the text is readable

Patterned backgrounds obscure the text, as in Figure 7-16. Don't do it. You defeat your business goals if you make the page hard to see and the text hard to read.

Keep the background light and the text dark

High contrast requires a light background and dark text (or vice versa). Many color combinations are difficult to read because they don't provide enough contrast between the text color and the background color, as you can see in Figure 7-17.

Are you focusing on the building or the words?

[HE HUNi MUSEUM WORKSHOPS & ACTIVITIES ¡¡}*V

► EthSbltionj

* Museum PatiDOi

► EthSbltionj

* Museum PatiDOi

Figure 7-16 When the foreground (the words) and the background compete for attention, it's hard to read the words. Plain backgrounds don't compete. Textured backgrounds or backgrounds with pictures, such as the building here, do compete.

www.huntmuseum.com

Figure 7-16 When the foreground (the words) and the background compete for attention, it's hard to read the words. Plain backgrounds don't compete. Textured backgrounds or backgrounds with pictures, such as the building here, do compete.

www.huntmuseum.com

1

Text Text

Text Text

Text Text

Figure 7-17 You can see for yourself that some combinations of text and background are very difficult to read.

Dark backgrounds and dark type are often very hard to distinguish. Blue text on red may even seem to vibrate on the screen, making that combination very hard on the eyes. Light colors (including light gray) are hard to see on a white background. Figure 7-18, an overview about asthma, shows you how some of these combinations look on an actual web page.

Did you even notice the

on white.

tag line here? It's light gray

How difficult is it to read f Js \ white on yellow or yellow ^^^ (

on white?

How difficult is it to read f Js \ white on yellow or yellow ^^^ (

Asthma is a disease of the lungs in which the airways become blocked or narrowed causing breathing c Hlj I, This chronic disease affects nearly 20 million Americans Asthma is commonly dmOeO intot*vo typos (extrinsic) asthma and (intrinsic) asthma T^sre is stilt much

_ research that needs to be done to folly understand how to pre.ent treat and cure asthma But with proper management people can live healthy and active lives

What on this page is easiest ' s*>J to read? Isn't it the black -text on a white background?

r__^

im

l^ll

AiJith* Udwglil

HOTUKE

M

1 S («pou, 1 C*r»i04

J

Asthma is a disease of the lungs in which the airways become blocked or narrowed causing breathing c Hlj I, This chronic disease affects nearly 20 million Americans Asthma is commonly dmOeO intot*vo typos (extrinsic) asthma and (intrinsic) asthma T^sre is stilt much

_ research that needs to be done to folly understand how to pre.ent treat and cure asthma But with proper management people can live healthy and active lives

Mililimedia Asthma Library IX! Glossary of Asthma Terms

Figure 7-18 High contrast between text color and background color is essential for legibility. If people have to struggle, will they stay on your site? aafa.org

By far the best combination for contrast and legibility is black type on a white or very light background. That's what most web teams are using today for parts of the web page that must be easy to read. It's a smart way to go.

Use light text on a dark background sparingly

Light text on a dark background is often called "reverse text." Most people find reverse text difficult to read, especially for sustained periods.

Don't use reverse text for the main content area of your web site. Look again at Figures 7-16 and 7-18. You can see how difficult reverse text is to read. (Also look at the case study at the end of the chapter.)

You can often make reverse text work well for small bits on the page, if you keep the contrast high, the size large enough, and the font bold enough. For example, many designers use reverse text on tabs, as you can see in Figure 7-19, from a Canadian site about diabetes.

1

m m

■ CANADIAN 1 DIABETES 1 ASSOCIATION

ASSOCIATION CANADIENNE DU Ol ABETE

Home About Us Sitemap

About Did betes | Professional!, P 059 "services

1_1.

Donations

Figure 7-19 White type on a colored background is often used for tabs, where people are reading only one or two words at a time. www.diabetes.ca

Figure 7-19 White type on a colored background is often used for tabs, where people are reading only one or two words at a time. www.diabetes.ca

0 0

Post a comment