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 https://www.lighthouseguild.org/)

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 word ‘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

• Lighthouse International

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.