Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

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

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.


This is the easy one – just substitute the word ‘colour’ for the word hue and you have the meaning.


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’.


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.


Related content

Written by :

Avatar of JamesByrne

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2, have two decades of experience and worked with hundreds of organisations.

07810 098 119

Alternative access to client feedback ››

Client Quotes

Loading Quotes...