Readability and Backgrounds

If they can't read it, why bother?

Opinion page by Duane Alan Hahn.

Be sure to check out the bad examples on the right side of this page. They are based on real color combinations that I have seen on the Internet over the years.

Poor Color Combinations

A web site is usually used to communicate with others, but if most people have a hard time reading your text, what's the point of having a web site? Some web sites have dark blue or dark purple text on a black background. I've even seen blue backgrounds with blue text on top that's only a shade different. I don't think these people even look at their own web sites, and if they don't, why should anyone else?

Most people who understand even a little about color know they should not use red text on a blue background, or blue text on a red background because the human eye cannot focus on certain shades of red and blue at the same time. The text seems to vibrate which causes eye strain. You can read about that in any old World Book Encyclopedia, but you will still see it on some web sites. Although the combination of red and blue seems to be the most infamous, you'll notice that red on gray is just as bad and the list goes on.

There are many poor color combinations, but if you actually look at your text, don't just know what the text says in your mind because you wrote it, but actually look at how the text looks against the background, you can avoid most newbie mistakes. If you find yourself using color combinations such as the ones near the bottom of this page, smack yourself in the back of the head with a rubber chicken and promise never to do it again.

Busy Backgrounds

Some web sites have busy backgrounds and that makes the text hard to read. It would be understandable if those sites were all owned by newbies, but you'll see that kind of thing from people who have owned a web site for many years. It's even more amazing when you see busy backgrounds on small business sites. I thought the reason for having a business web site was to sell products, not to annoy visitors.

If you feel that you absolutely must use a busy background (or you'll just die), there is a simple compromise. If you use tables, you could display your text in a plain white box with your background surrounding it (just add "BGCOLOR=white" to your TABLE tag). Here's an example:

You can use a crazy background and still allow people to read your text.

People will still get to see your extraordinary, miraculous, earthshaking, life changing background image, but they will also be able to read your text without blood squirting from their eyes.

Some companies think it's cool to use their logo as the background and even if they're smart enough to fade the image until it's almost invisible, it can still be distracting and irritating. It's especially annoying when that logo has been turned into a static background. Ever see those? The image is always there in your way as you scroll up and down the page. Horribly evil and evidence of someone doing something they think is 'cool' without even considering how irritating it might be to potential customers. It would look more professional to just have the company logo at the top of each page and use a plain color, such as white, for the background.

Avoid Black Backgrounds

Prickly Personal Opinion

Using a black background doesn't make you look evil, mysterious, or uniquely artistic, and it doesn't prove that you are a dark, brooding loner. You might want to use a black background because you are going for the 'retro' look. That's not a horrible reason, but it still doesn't change the fact that black backgrounds suck. Just because some old game had a black background doesn't mean that you must have a black background behind your text. For example, Space Invaders didn't have page after page of text to read on that black background. You were shooting aliens, not reading Moby Dick. Why not have a black background with something like black text on white in the middle? Here's an example:

Imagine that. A retro black background with black text on white. What will they think of next?

For some reason, many people who have modern game related sites also think it's cool to have a black background (especially teens and people from the UK). I don't know why, maybe it makes them feel all dark and naughty. Maybe they're subconsciously saying, "Look at me Daddy, I'm Batman, I'm Batman!"

Text of any color on a black background is hard to read for people who have astigmatism, so reciting some lame study that says dark green text on a black background is the best for everybody is silly. I and everyone I know must have astigmatism because I've tried every major color combination I could think of, and black text on a white background always wins (except for people who have their brightness or contrast turned up too high). A black background behind light text makes my eyes feel like they are being sucked out of the sockets and it can mess up my vision for several minutes. Trying to read text on a black background does not give my eyes more comfort, it hurts them. Here's a related quote from Jason Harrison at the University of British Columbia:

"People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye."