Accessible Web design: Colour

Using colour on the web: basic theory

Colours on the Web are specified using the 'RGB' system - red, green, blue.

From the point of view of your computer monitor this means - some amount of red light, some amount of green light and some amount of blue light.

In theory - you have the choice of 256 variations of each colour - giving you over 16 million possible combinations.

In practice - web browsers can only consistently display 216 colours.

6 Red colours
6 Green colours
6 Blue colours

If you specify a colour outwith this range, the browser will try to make something up from a combination of the colours that it has available (i.e dots of different colours in proximity to one another can look like a single colour - as long as you don't look too closely). This resulting effect is called 'dithering' - and can result in something radically different from the colour you originally specified.

There are two ways to specify colours in your web pages: by name and by hexadecimal number. Hexadecimal is a base-16 system.Most colours used in web pages are specified in hexadecimal because it is a more consistent way to specify colours.

You will be relieved to know that you do not need to learn the hexadecimal number system to add colours to your pages; most graphics programs can convert the colour you choose to the correct code. There are many websites to help you choose colours for your pages (see links at bottom of this page) - most of these pages provide the hexadecimal codes for the colours you would like to use.

Most HTML reference books provide lists of colour names you can use instead of hexadecimal codes.

Graphic types

The two main types of graphic used on the Web are .gif and .jpg - these are two different ways to compress graphic files.

.jpg is used for photographs and graphics that have subtle gradations.

.gif is used for graphics such as logos - anything that has blocks of a single colour.

Monitors also affect colour

Mac monitors tend to be 'brighter' than PC monitors. If you design your graphics on a Mac they will tend to look a bit darker than you would like on the PC (and vice versa). This is due to the Gamma settings on Macs and PCs. Many designers set a Gamma setting half way between the normal Mac and PC setting to compensate for the difference - a value of 2.2 is often used.

Spelling

The American spelling of the word colour is always used when specifying colours on web pages, so it's color, not colour.

Picking Colours

Here are some general guidelines

Look to nature to find examples of good colour combinations.
Don't use too many different colors as this can make your pages look confusing; two or three main colours are enough.
Avoid colours that lead to insufficient contrast between text and background.
Large areas of bright pure colour can be tiring; use bright colours sparingly, to contrast with duller background colours. In particular, using bright colors for both text and background will make text tiring to read.

Colour and accessibility: main issues

Contrast

Ensure good contrast between text and background, and if using style sheets to turn off underlining of links, make sure there is enough contrast between links and surrounding text. Making link text bold helps links to stand out.

If possible check pages with a greyscale monitor, or turn your monitor to 256 shades of grey if you can.

Don't rely on colour alone to provide important information

For example in a form don't write, 'the fields with a red dot next to them are compulsory, those with a green dot are optional.' This statement will be of no use to people who are colour blind or those using greyscale monitors; they are unlikely to be able to differentiat between the colours.

Colour blindness

The main colour combinations to avoid for people who are colour blind (dichromatism):

Red/green combinations (memory aid: red berries against green leaves on a tree)
Blue yellow combinations (memory aid: yellow daffodils against a blue sky)