Article

Guidelines For Using Color

by Web Design From Scratch

Apply a color scheme

Visually appealing web pages need a consistent color scheme. Without color, a page can lack personality. With a consistent and balanced color scheme, a page can have a consistent and balanced personality. Too much color, or erratic color, gives a page a confused personality.

A color scheme often refers to a consistent system of matching hues. It might alternatively mean a way of using colors, which don´t necessarily belong to a family of hues.

For example, www.apple.com uses different colors in different sections, but the colors are used in a similar way. In this case, the consistency derives from the treatment and application, rather than the colors themselves.

Use enough color

Using too little color risks looking boring or inert. color is a good way of identifying, grouping or differentiating elements. It´s cheap (especially when applied through Cascading Style Sheets) If you use too little color, you have to use other means to draw the eye, to differentiate and give meaning to elements.

Leave white space

White is the best shade for reading text against. It is conventional to place content areas against a white (or very light-colored) background. White areas quickly stand out to the scanning eye as likely content areas.

Use your lightest background for main content

I´m going to stick my head out here and say it outright: white is the best color/tone to put your central content on. The lightest tonal area on your page should be your content area, because that´s conventional and what the brain expects.

Keep intense colors for attracting the eye

Intense color attracts the eye, and the greater the area, the stronger the attraction. Too many intense colors attract the eye in too many directions, and the technique loses its potential effectiveness.

Avoid using too many different colors

Lots of color can look hyperactive or garish. Some colors naturally go well together, some naturally clash, particularly when adjacent, which can create nasty effects on some screens.

If we accept the benefits of working with layout conventions, and its inherent limitations, color becomes a more useful and attractive way to differentiate designs.

Limitations of color: color-blindness

Some people (mainly males) have impaired ability to tell certain colors apart. There are several types of color-blindness, the most common affecting red & green (they appear very much the same).

You should not use color (particularly red and green) to mark elements in such a way that a user needs to differentiate the colors to use the interface successfully. Ensure that all information conveyed with color is also available without color, for example from context or markup.

Also, ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

posted on Jun 2, 2007

   Topics