Random Terrain

Useful Inventions

Favorite Quotes

Game Design

Atari Memories

Personal Pages

Readability and Backgrounds
If it's hard to read, why bother?

Opinion page by Duane Alan Hahn.

 

Most people who visit this page come here to use the Color Finder Tool below. If you haven't tried it yet, check it out. I use it even more than I thought I would. It's very useful.

 

 

 

Color Finder Tool for Webmasters

 
 

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 Hard to read ), or blue text on a red background Hard to read ) because the normal human eye, with normal lenses, 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 red on blue or blue on red at some web sites. Although the combination of red and blue seems to be the most infamous, you'll notice that red on gray can be just as bad, and those probably aren't the only eye raping color combinations.

 

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 on the right side of this page, smack yourself in the back of the head with a rubber chicken and promise to never 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
A prickly personal opinion.

Image from www.InternetBumperStickers.com

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 ancient monitors had light text on a dark background or 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 their 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 (approximately 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."

 

One good solution is to let visitors pick the text and background colors they want to use, but not all web sites are able to do that.

 

 

Spread the Word

If you like this page, please link to it and share it:

Back to Top

 

Table of Contents

About the Color Finder

This is a tool to help you find text and background colors as quickly and easily as possible. It's based on the Colour Contrast Check Tool by Jonathan Snook (used with permission). His tool is great, but I don't need the compliance test and I'd rather have the text/background result at the top.

 

You can use the sliders or you can type in or paste a six-digit color code into the box and hit the Enter key. This tool is useful for finding that perfect text, link, or visited link color by seeing the text change color right in front of your eyes in real time.

 

Bad Examples

I can't include every bad color combination I've seen, but this should give you an idea of the types of things that should be avoided if you want your visitors to read your text without unnecessary eyestrain. And yes, people really do use color combinations like the ones below (and worse).

 

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Hard to read

Related Links

Light text on dark background vs. readability

"I hate the way they linger on the retina when I look away from my screen."

 

5 Common Mistakes to Avoid

"Avoid black backgrounds, harsh color palettes, or graphics-intensive designs. This way, your content becomes king, not your design."

 

Tips for the Burgeoning Web Designer

Disclaimer

View this page and any external web sites at your own risk. I am not responsible for any possible spiritual, emotional, physical, financial or any other damage to you, your friends, family, ancestors, or descendants in the past, present, or future, living or dead, in this dimension or any other.

 

Don't really smack yourself in the back of the head with a rubber chicken. If you do smack yourself in the back of the head with a rubber chicken, I am not responsible for any brain damage you might receive. If you repeatedly smack yourself in the back of the head with a rubber chicken and you get a bald spot, that's also your own fault. I will not pay for your Rogaine treatments.