Colour in Web Design

Guidelines for using colour in web design

Give your web site a colour scheme

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

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

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

Example of web page with not enough colour

Use enough colour

Using too little colour risks looking boring or inert. Colour 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 colour, you have to use other means to draw the eye, to differentiate and give meaning to elements.

Leave white space in web page layouts

White is the best shade for reading text against. It is conventional to place content areas against a white (or very light-coloured) 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 colour/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.

Example of light background colour used wrongly

This example came from http://www.pixelgraphix.de/ a while ago. With the default stylesheet, the main text is displayed in very light grey boxes against a white background. Notice how your eye doesn't want to settle on the grey boxes - it wants to look at the white for some reason.

Keep intense colours for attracting the eye

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

Avoid juxtaposing intense flat colour with photographic imagery

Avoid using too many different colours

Lots of colour can look hyperactive or garish.

Some colours naturally go well together, some naturally clash, particularly when adjacent, which can create nasty effects on some screens.

 

This combination of colours clashes and is hard to read, also compounded by the tiny font.

 

Placing coloured areas adjacent to less-saturated or greyscale areas can look very smart.

Colour schemes inspired by Nature

Luke Wrobleski (in an article published on Boxes & Arrows) argues that so many corporate web sites use the same safe colour scheme that they're starting to look the same. He argues for more creative use of colour on web pages.

He says that, if we accept the benefits of working with layout conventions, and its inherent limitations, colour becomes a more useful and attractive way to differentiate designs.

Luke also proposes a really nice way of finding complementary colour schemes: using inspiration from Nature.

Limitations of colour: Colour-blindness

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

The implication of this is: You should not use colour (particularly red and green) to mark elements in such a way that a user needs to differentiate the colours to use the interface successfully. The W3C Accessibility guidelines state the following as a Priority 1 checkpoint (i.e. you need to comply with this requirement to claim ANY W3CAG compliance):

• Ensure that all information conveyed with color is also available without color, for example from context or markup.

A second checkpoint states:

• 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. [Priority 2 for images, Priority 3 for text].

Links:

• Applying Color Theory to Digital Displays - an excellent overview by Pabini Gabriel-Petit
• 3 case studies in using colour for organisation from kianta.com
• Good article that describes 4 useful colour groups, and how to use them to communicate a range of qualities