Background - Foreground Conflicts @ OWDC

LESSON 1-06-03: Background - Foreground Conflicts

Web Design Lessons > Lesson 1-06-03: Background - Foreground Conflicts

Previous Lesson | Lesson Index | Next Lesson

In this lesson of Online Web Design Course, we're going to learn how to avoid background - foreground conflicts by learning how to choose the correct background colors and images for our HTML documents.

Readability Issues

Web design is, first and foremost, about content. If people visit your website, they do so because they hope to benefit from your website as fast and easily as possible. If your content is not readable enough, they will not benefit from website fast and easily enough. And if they can not benefit from your website fast and easily enough, they will simply leave.

Now, the last thing you want is your visitors to leave, so what do we do? We make our web pages readable! :)

Readability is attained by the distinction of colors. If you choose to have a dark background, make your text light. If you wish to use a background image behind your text, forget it! Never, ever use a background image right behind your text - it will probably ruin the readability of your content. There are exceptions of course, but it is generally not a good idea to put text in front of a background image.

Let's say we have "brown" as our background color. Do you think it is a good idea to make our text black? I don't think so. Let's have a look:

This is black text over brown background. Not a very good combination, huh?

If you use the above color scheme, your website is guaranteed to fail. This is all common sense, but you'd be surprised at the number of webmasters who make their content unreadable! Below is a conflicting background image - foreground text situation:

This is black text over a dark background image. Not a very good combination, huh?

Let's say we whiten up our text:

This is white text over a dark background image.

This is slightly a better combination, but still unprofessional. As dark as the background image may be, it still contains light colors which conflict with our white text and make it harder to read. Plus, text in front of a tiled background image looks ugly most of the time.

If you feel you absolutely *must* use a tiled background image, you can put your text into a table with a different background color:

This text is much more readable than the above examples.

Turn Off The Images

Some people surf the internet with images turned off (they modify their browsers so that images on the websites they visit do not get downloaded on their machine) to speed up their surfing sessions... And some people use text-only browsers, which are incapable of downloading web graphics anyway.

Because one of these people may just be your best customer/visitor ever, you want your website to appeal to them as well. That's why, especially when using dark background images and white text, it is a good idea to set the "bgcolor" attribute for your background as well. If you do not set a "bgcolor" attribute, your visitors' browsers will set it to default (which is generally "white"). So if a visitor is surfing with images turned off, they may get white text over a white background.

Always test your websites with images turned off. To turn off images in Internet Explorer, click on the "Tools" menu, select "Internet Options..." then click on the "Advanced" tab and uncheck the little box where it says "Show Pictures" under the "Multimedia" Settings.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

Online Web Design Course Lesson 1-06 is finished. Next lesson of our free web design course will uncover the secrets of adding graphics to your website!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables
• Lesson 1-06 Background Alteration

• Lesson 1-06-01 Changing background colors

• Lesson 1-06-02 Adding background images

• Lesson 1-06-03 Background - foreground conflicts
• Lesson 1-07 Images
• Lesson 1-08 Hyperlinking

Back To Top

BACKGROUND ALTERATION!

Readability Issues

Turn Off The Images