Understanding colour contrast and accessibility

Colour - in terms of accessibility - is one of the areas I find hardest to understand; I can read a sentence like,

'avoid using colors of similar lightness adjacent to one another, even if they differ in saturation or hue.' (from http://www.lighthouse.org/color_contrast.htm)

And be as confused after I've read it as I was before.

I guess that is because - not having done a course on colour theory - I'm thrown by the jargon. In this weeks tip, I will define the words hue, lightness and saturation, and, having figured out what they mean - try to understand the above tip. Bear in mind that with these definitions I am simplifying as much as I can.

Hue:

this is the easy one - just substitute the work 'colour' for the word hue and you have the meaning.

Lightness:

how much light does the colour reflect: black doesn't reflect much, white reflects lots. Colours thus appear light or dark; how light or dark they are - tells you their 'lightness'.

Saturation:

the purity of the colour - saturated colours contain no white, grey, black or complementary colours.

Ok - so now I'll put the tip from the Lighthouse website into words I understand:

Even when using different colours next to one another (e.g. text and a background colour), if they are similarly light or similarly dark there will still be accessibility issues for some users.

Phew - perhaps this 'colour business' is not as impenetrable as I thought.

Links

• The Theory of Colour: definitions: http://paintcafe.sympatico.ca/en/couleur/langage/vocabulaire/
• Lighthouse International: http://www.lighthouse.org/index.html

The tips archive is at: http://www.mcu.org.uk/weeklytips/

Contributed by Jim Byrne
Updated Wednesday 22 Oct 2003

Free weekly accessible web design tip

Comments