Homestead Blog

One of our product designers, Jerry, wrote in January about the nuts and bolts of using Homestead’s color tools. Here he is again to give you the next in his series on color: how to choose good colors for your website design – Rochelle.

Last time I talked about how to use tools like the color picker to customize your site. Now that you know how to pick colors, maybe we should talk a little about what colors you should consider using in the first place.

There are two very important characteristics of color that you should be familiar with and keep in mind as you make decisions in the design you your websites: aesthetics and usability. Both can have a profound affect on the effectiveness of your site, and they don’t always work hand in hand.

The aesthetics of color

There are many things to consider when choosing colors for a site; your preferences, the mood you want to set and your site’s message or purpose are just a few of them. These factors are unique to you and your site, and the choices you make convey a great deal to your visitors, who respond to them in their own highly individualistic way.

Colors often have personal and cultural associations to your visitors that you should try to keep in mind. Here are a few useful generalizations about some basic colors (depending on who you are, you may disagree!):

• Red: aggressive, passionate, vital, energetic
• Orange: fun, cheerful, exuberant, positive
• Yellow: light, cheerful, easy going, optimistic, warm
• Green: tranquil, fresh, healthy, deeper green associated with wealth
• Blue: serene, dependable, secure, faithful, associated with the sky and sea
• Purple: sophisticated, royal, mysterious, blend of passionate red and serene blue

Successfully choosing colors along aesthetic lines is a lot easier if you have an idea who your audience is and what you want to convey to them.

Beyond the more intangible aspects of color selection, there are also a few practical things to pay attention to, since your color choices also have a big impact on how easy your site is to use.

The usability of color - contrast and readability

It’s important to make sure the text on your site is readable. That means not only using the right font and text size, but also making sure there’s enough contrast between your site’s text and the background behind it. Black and white contrast nicely, but if you to use a different background or text color, things get a little trickier.

We’ve all been to websites that seemed a little color-happy; think about how you reacted to those, and whether you had trouble reading any of the text on them. Remember, it’s not enough to have your site look pretty; it needs to convey your message properly and easily too.

As a general rule, a color contrasts the most with the color on the opposite side of the color wheel, and brighter colors stand out against a darker background. You can find contrasting colors by looking at the color circle of the Color Picker, which is basically a color wheel.

Just keep in mind that some colors will have great contrast to each other but look ugly together. However, you can generally find contrasting colors that look good together. The best sanity check is to find a few people to look at your site and give feedback on how easy your content is to read and how good it looks.

Highlighting

Color contrast can also be used to highlight, which can be very useful when you need your users to see something specific on your site. Whatever it is you want to draw attention to should look different from everything else. The trick is to keep the “everything else” consistent throughout your site so your intended highlights pop out.

Here’s a rough guideline: use a small number of colors (four or fewer) that complement each other for each of your pages. Then have one or two highlight colors. Trying to use too many colors makes nothing stand out, since visitors perceive a difference wherever they look on your page!

Be very critical about deciding what the really important things are on your pages. You don’t always need to use color contrast to draw attention; sometimes, good layout will lead your site’s visitors to where you want them to go. Color isn’t your only tool in good design.

Colorblindness

Colorblindness should be a special consideration. About 10% of males have some form of colorblindness, the most common being some form of red-green colorblindness (blue-yellow and achromatic colorblindness are rarer). For these people, colors close to red and green appear to have much less contrast than they do to those with full color vision, so red-green combinations should be avoided where contrast is important.

An advanced class in usability

For those who want (a lot) more detail about the usability concerns related to color, NASA’s Ames Research Center has a site on color usage in critical applications such as flight. They emphasize usability and don’t really consider aesthetics. They don’t care if it’s pretty – after all, they’re designing color schemes for pilots and others who need to process data very quickly. But it can be useful reading if you’re interested.

The grain of salt

While aesthetics and usability don’t necessarily conflict (and often don’t), leaning more towards one sometimes means making compromises to the other. When making these tradeoffs, it really comes down to deciding which direction benefits your site’s message and your visitors more, as long as the tradeoff isn’t too extreme. Usually though, there is a way to accommodate both aesthetics and usability.

Things can get a little complicated with color, but if you keep the needs of your site and your visitors in mind you should have no trouble finding a good balance. If you have any specific questions, write in with your comments and I’ll try to answer them.