Understanding colour contrast and accessibility
Added on Wednesday 22 Oct 2003
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/