Bad Backgrounds

A bad background is one that distracts from the purpose of the site. The most common background problem is putting text over a high contrast background.

The background in the left hand sidebar of this site is an example of a background that is right on the edge of being a problem. At first, it was as dark as the background in the header, and that made the text unreadable. It isn't just the higher contrast of this background, but the fact that the horizontal stripes conflict with the readability of the text when they are very dark.

On the right, you'll notice that we put the links into a white box. This is because text size also affects readability, and even with the text all black, it still looked choppy over the background. This is one strategy you can use that allows you to keep the effect of a background you like, while still preserving the optimum readability of text.

The major problem is a high contrast background. When there are lots of light and dark extremes in a background, items you put over it will not show up well. The primary concern here is text - any text over it will be unreadable. But even graphics may not show to best advantage when put on a busy background.

There are three basic strategies for compensating for a background that you just love, but which is not going to work well with text over it:

  1. Increase the text size and bold it. This will only work when the problem is minor. If the text has to be made very large, your site will look clumsy and unprofessional, if not downright ugly.

  2. Take the background image and open it in an image editing program. Turn the Brightness UP, and the Contrast DOWN. This may gray out your image some, but don't worry about that yet. Just get it to where there is not a lot of extremes between the lights and the darks. Next, run it through the color enhancement tool - you can increase the intensity of the main colors that you are coordinating with your site. It is best if you go for a light shade which you can put dark text on, or a dark shade that you can put light text on.

  3. Use the table trick. Create a single cell table, make the background of the cell a solid color. You can even make the table one color, and the cell another (set the cellspacing at 1 or 2 pixels), to give it a contrasting border. This privides a simple, and attractive means of keeping your background, while popping out your text very nicely.

I've seen a LOT of sites that make the mistake of using a high contrast background. Some are so unreadable that you cannot even tell what the site is about. It is incomprehensible to me that the site owner did not notice.

Sadly, some of the sites I have seen that are like this are professional sites. Others are created by people who just seem to want what they want, regardless of whether it actually works or not. It is also one of the SIMPLEST problems to fix, so there is really no reason why any site should have this problem.

Written by Laura Wheeler