Color and Web Pages

Tweet

Color. It’s all around us. Everywhere we look our world is filled with color. Color can capture our attention, can make us feel certain emotions at times, attract us, repel us, annoy us, entice us. It’s much the same when it comes to web pages.

Graphics, colored text and backgrounds, pictures, etc. are some of the things that make the Internet so wonderful, but these same things are also some of the worst aspects of the Internet in given situations. How can you use color effectively on your site?

You can use colored backgrounds or patterned tiles or borders to add a little spice to your page. After all, who wants to look at plain ol’ black and white all day long? It’s pretty boring, right? This is an area, however, where what is good in theory doesn’t always translate to being good in practice.

Always, always, always remember: your background tiles or your cool graphics or color combinations shouldn’t be the focus of your site. (It should go without saying that this is especially true for Internet businesses.) Rather, these page elements should enhance the information and/or product or service description/presentation. In other words, you want your visitor to leave thinking, "Wow! That person really knows their stuff! I know where I’m buying my next [blank]." You DON’T want the visitor to leave thinking, "Wow! What cool graphics! Hey…what the heck was that site about anyway?"

The most common mistake in terms of use of color, in my opinion, is poor choice of background/text colors. If you use poor color combinations and render your text unreadable, you might as well have taken the money you spent on developing your site and started a nice bonfire with it in the middle of the street. It would seem self-explanatory that text should, by its very nature, be readable, right? For many of us, it’s not difficult to grasp that very basic concept…that is until we discover the neat FONT COLOR tag or delve into CSS – then we can become tempted to get a little too cute.

Myriad pages exist that prove readability isn’t high on many designers’ list of priorities. It sounds boring, but black text on a white background is by far the easiest to read. You can add color with a conservative border background or through the use of TABLEs and the BGCOLOR attribute of the TD tag. Just don’t go overboard.

I would especially caution against use of colored text on a colored background; I’ve rarely seen designers pull this one off. Unfortunately, too many designers think bright blue and bright red make a great color combo – WRONG!! Choose your text/background colors wisely; if you don’t, all your effort has been wasted.

I don’t think there’s anything particularly wrong with judicious use of colored text or white text on a colored background; using this set up in a navigation bar, for example, is fairly common. What I’m cautioning against is using colored text on a colored background on the majority of your site. Don’t discount the negative effect this can have in terms of your visitors’ perceptions of your site.

In closing, I think it’s always a good idea to play it somewhat conservative on business sites as a general rule. If you’re designing a personal homepage, knock yourself out with the neon green/hot pink color scheme. Don’t risk losing business for the sake of having a wild or "cool" color combo, though. Would you spend hours crafting a great message for your brochures then tell the person behind the counter at the printer, "Just pick any colors"? No, of course not; you realize that the medium is at least as important (if not more so in many cases) as the message. Try to think in these terms when designing your site as well and I’m sure you’ll stand a much better chance of succeeding!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments