Colour on the Web

This information comes from a talk called "Colour as Communication: Human Factors Theory and Practice" by William M. Gribbons, Bentley College, Waltham, MA.

The dangers of colour

Some people know how to use colours very effectively. Ads use colour to communicate, and advertisers have known for years how to use colour. Have you ever noticed a bright green ad, say in a newspaper, that keeps drawing your eye toward it? Or looked at an ad for something expensive and realized how elegant the ad looked? Some of that is done with colour. And McDonald's colour combinations at the counter are chosen to make us hungry. At the tables, on the other hand, the colours clash and make us want to leave as soon as we've eaten.

Most people are unaware of how they are manipulated by colour. Because we know what colours we like, we think we know how to use colour. Technical writers and programmers understand only too well the "everyone can write", "everyone can program" attitude. The use of colour has the same problem. Professionals like graphic artists take at least four courses in how to use colour.

Colour is a form of communication in itself, and a powerful one. It has complicated effects on the human body -- both physiological effects (like making you hungry) and emotional effects (like making you sad).

Yet for some time now, interfaces have given the user control over screen colours. A secretary may choose to work in Windows with lime green text on a magenta background. She may like the colours, and say that they make her feel comfortable. She may not associate them with her frequent headaches.

People in this Western culture want control over our environment. But unfortunately what people like, and what they can live with, may be two different things.

With everyone creating web pages, the problem has been compounded. Not only can we inflict our colour choices on ourselves, we can now inflict them on our readers as well.

Designing Web Pages Using Colour

Colour has three characteristics. (You could say they are red, green, and blue. Or hue, saturation, and brightness. Or hue, saturation, and LIGHTness...) To look at the physiological effects, let's say that colour has the following three characteristics:
  1. Hue: The wavelength in the visual light spectrum.
  2. Lightness: The amount of achromatic colour (black or white) mixed with the hue. Light colours reach the processing centre of the brain more quickly than dark colours.
  3. Saturation: The purity of the colour. A saturated blue, for instance, has very little green or red in it.
The best colours for readability are: Small size needs more saturation to be visible.

Our eyes have red-sensitive, green-sensitive, and blue-sensitive cones, as well as light- and dark-sensitive rods. The fovea (focus areas) of our eyes contain far more red and green cones than blue ones. The blue cones are mostly with the rods, in the peripheral vision area.

Our peripheral vision is what catches motion. It also catches blue. That's why blue lights are used at airports for pilots to see from the air.

Our eyes have to adjust differently to focus on red than on blue. Blue images appear further away than red ones. That means that BLUE is a great background colour. On the other hand, RED should never be used in the background.

Don't use blue for text, small objects, or important objects. If you must use blue for something small, mix a little green with it. Blue is a good colour for links, since you don't want them screaming out.

There are two reasons you might want to use colour -- for conveying meaning (for which it is excellent) and for sensory appeal (the usual reason for using colour on web pages). Read on for a little bit more about these two different uses, as well as colours that are friendly to various different browsers.

Or go:
- Back to the wordlore page.
- Back to the front gate.
Page maintained by Ann.