Web design and colour contrast

A quick note on Website Accessibility and the use of contrasting colours.

We’re all aware of the W3C standards that web designers and developers adhere to when creating sites. These standards meet the needs of users with disabilities, partially-sighted, blind and older users. 

 

I won’t go into W3C details here, but I do want to address some of the issues surrounding colour and contrast that need to be recognised when specifying, designing and building a website for partially-sighted people. It’s worth saying that W3C is ‘the standard’. What I’ll talk about here are matters of best practice, designed to meet the requirements of W3C – and most importantly – the needs of the real world.

 

Ok, let’s get something straight from the off! I’m a designer, I love to create and produce impactful and good-looking websites. But I’m also realistic. There’s no point in creating a website that’s no use to large groups of visitors to the site. There’s a happy balance which needs to be found between design and function. I mean, wouldn’t the world be an awful place if every website looked like Nielsen’s UseIt.com!

 

It’s also worth saying that my dear grandma was blind and there’s glaucoma in the family. As a result I’ve taken a great interest in accessibility and design.

 

How do you know if your website has the right level of contrast?

Assuming you don’t have time to read the colour section of W3C, let’s cut to the chase and talk contrast. 

 

The important factor is that there is sufficient contrast between background and foreground colours so that anyone with sight problems can clearly distinguish text. Here’s the technical bit (sit up straight at the back of the class). Color visibility can be determined according to an algorithm… which says that two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

 

If you’re really, really interested, the algorithms for the set ranges are:

 

For Color brightness the formula is:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
The range for color brightness difference is 125. 

For Color difference the formula is:
(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))
The range for color difference is 500.

If you want to check to see if your website build has the right level of text contrast try this handy tool at www.accesskeys.org - it’s really handy for a final once over.

Here’s some great examples of some good contrast text in websites:

Detail from www.farnham.gov.uk

 

Detail from www.gallionsha.co.uk

 

Have you thought about ‘High Contrast’ colour option button?

Here’s another thing to consider with the planning, design and build of an accessible website. Add a ‘Contrast’ or ‘High Contrast’ button to the website. This is becoming an acceptable way of making some instant colour style changes, typically to a black background, with yellow text and cyan links. See the example below:

Change of colour scheme from normal to high contrast

Here are a couple of links to websites with this High Contrast effect:

www.langdoncollege.ac.uk
www.bradfordcollege.ac.uk 

Hopefully you’ll find this information useful. 

Do get in touch if you’d like any advice about web design with Accessibility in mind.

---