Colour and accessibility in web pages

On this page: Colour is often overlooked as a cause of inaccessible content in web pages. In this, the first of an occasional series on accessibility, Lois Wakeman discusses some of the issues that designers should consider.

Do I really need to bother with this?

All the bright young things who are at the cutting edge of web design probably don't worry about pensions, nor about the fact that one day in the unimaginably distant future, their eyesight won't be as sharp as it is now. However, good designers of all ages remember that not every web user has 20/20 vision, and take account of it when making a web page.

(Accessibility for those with less than perfect vision has many aspects, but here, I am concentrating on those related to colour.)

You may think that it isn't worth bothering to make your pages accessible to people with sight problems, as there aren't that many about. Of course, that is your privilege. But don't forget that between 5 and 10% of the male population (and a very much smaller percentage of females) has some degree of colour blindness. Don't forget either that older people comprise an increasing proportion of the population in the UK and elsewhere, and that some of them have big spending power and poor eyesight!

colour vision deficiency

The most common kind of colour vision deficiency (commonly but inaccurately known as colour-blindness) is the red-green sort, where shades of red or green may, as I understand it, either appear washed-out, or muddied, to varying degrees.

It might seem to follow that no-one should employ a logo done in red and green, but if you read this page by Diane Wilson on link to external site colour deficiency, you will learn that it is all much more complicated than this. To summarise her findings, you are only really safe with black and white, and presumably some grey as well. However, the web would be a very dull place if it were all monochrome, so I will try and suggest some ways of allowing everyone to cope with colour.

A bit about how colours work on screen

I don't intend to go into the depths of colour theory here, so experts must forgive the sweeping generalisations I make to keep it short! I have used the HSL model rather than RGB, since it is a bit more intuitive, I think.

screenshot of colour palette showing HSL and RGB values for a selected colourIn one of the colour models (HSL) used to display colours on your screen, each colour is made up of a Hue (its basic shade - a mixture of the primaries, red, blue and green), modified by Saturation (the proportion of the hue in the colour - zingy colours are saturated, while drab ones, which effectively contain more grey, are not), and Luminance (a.k.a. lightness or brightness - how bright they are - white is total luminance and black is zero luminance; the middle value between the two is the pure hue.) In the screen shot left, the range of hues is shown from left to right, and the range of saturation from top (high) to bottom (low). The third variable, luminance, is shown by the slider on the right.

Each of HSL can take a value between 0 and 1 (or 0% and 100% if you like). Depending on the software tool you use to measure colour, this range is usually divided up into 240 or 255 steps. The one illustrated uses 240, and the green I have selected happens to have the (arbitrary) hue value of 80, and a saturation of 144, just over half way saturated. The luminance is in the middle of the range - we are looking at a section through the centre of a three-dimensional colour cube, if you can imagine this? (The cube would have one white and one black face in the same orientation as the slice we are looking at.)

Every colour displayable on your monitor is made up from a combination of these three variables. People with fine eyesight can distinguish quite small differences in colours, although obviously you wouldn't want to make them work too hard unnecessarily. But people with colour deficiencies or poor acuity need a bit more help.

Using the theory in practice

illustration of how text and background are difficult to distinguish if poor contrast is usedIn common parlance, what most people need is a good contrast between one item and another, to see details clearly. It is not sufficient to have a contrasting hue if the saturation and luminance are similar: see the little example left. The @ sign is clear enough (if eyeball-wrenching for reasons that Diane Wilson describes) when the viewer can see the difference between blue and red, but look at the monochrome version underneath to see how little contrast there is in saturation and luminance. Those with poor acuity will also find it more difficult to read, even if their colour vision is perfect.

An aside on link colours

We are generally advised to leave the link colours at the defaults to avoid confusing users. Unfortunately, the usual scheme of blue and purple-red means that some people can't see the difference between a new and a visited link. But the convention, which goes all the way back to early browsers like Mosaic, is now so entrenched that to change it would be very difficult. See link appearance and usability for more details.

Text and backgrounds

Dark text on a light ground is easier for most people to read, but for some, the reverse is true. You could provide dual versions of your site in two schemes, but few people have the resources to do this - the BBC's link to external site BETSIE site is an early example; but today, style sheet switchers are a much simpler option. But however you do it, choose something with a good contrast that is easy on the eyes. Have a look at the RNIB's link to external site hints for designing accessible web sites for a list of good colour combinations.

This principle applies to text and page background combinations and also to buttons, logos and other graphics that rely on the visitor being able to see what they say (like graphic headings for example).

In general, textured background images make it more difficult to read a page, so should be used with discretion: have a look at this silly example, which is not too far from what you will find on some real pages!

If you are using colour as a distinguishing feature of your site (either as part of the site livery, or to colour-code different parts of the site), remember that not all your visitors will be able to get enough information from this. Try to use some kind of distinctive pattern/texture, wording or icon to supplement the colour.

Graphic elements

Many web sites have a high proportion of graphic elements, used for branding, decoration, or to add to the actual content. While you can often design logos etc. to look OK to everyone, the same will not be true for photographic or video content. In this case, you should ensure that, if the element is an essential part of the page content, there is a commentary of some kind to explain it - ALT texts for images, links to commentaries for a video clip, links to a table of statistics from a bar or pie chart, and so on.

Style sheets and font/body colours

In the past, most colour combinations used on web pages were specified by attributes of the <body> or <font> tags. Today, CSS styles are generally used to colour pages. The same principles on colour choice apply, however you implement them.

Newer browsers allow the user the chance to specify his/her own colours instead of yours; and most allow him/her to specify a style sheet to use. I discuss browser customisation on my changing browser default colours page, and also provide some legible style sheets for download.