How can I use colour accessibly?

---

The University of Kent runs a successful series of Digitally Enhanced Education webinars. One of which was on the theme of Technology to Develop Inclusive Learning Experiences. I presented “Making it simple to ensure the use of colour is both on brand and accessible“. Watch the recording below or read the article-based version further down this page.

Scenario

Imagine this scenario: you’ve just been told that the feedback to your essay is available from the “Your Feedback” button. You anxiously scan the website to find the button and it looks like this.

We’re still in lockdown, so you’re working at home in your kitchen and you have terrible screen glare. You’re not able to move to a better location because your housemates are using the other rooms. The “Your Feedback” button looks like this:

Tension rises as you ask yourself, “is this the right button?”, “what if I click on the wrong button”. Stress and anxiety could have been avoided. A better colour combination that had more contrast would be easier to read.

The impact

More than two million people in the UK live with a visual impairment. Many more have difficulties with their sight. It is crucial that, when we create content, we make accessible colour choices. Many readers will skip over text where its colour has insufficient contrast to the background.

As well as physical impairments we can encounter situational impairments, particularly during our period of lockdown. Screen glare or using a device in bright sunlight are examples of situational impairments that affect how we perceive content.

Shouldn’t this be obvious?

It’s obvious when text has too little contrast and is hard to read. These samples, for example, will be difficult to read for most people.

Yet the WebAIM survey of the top million web sites found that more than 86% had text with too little contrast. This is a failure of the Web Content Accessibility Guidelines. Blackboard reports that content with poor contrast is the most common accessibility issue affecting institutions. How can we know that the colours we choose will have enough contrast for text to be readable?

A ‘rule of thumb’

A simple rule of thumb is that light text on a dark background should be easy to read. Conversely dark text on a light background should be easy to read. But how light is light or how dark is dark. What about these examples, do they seem hard to read to you, or easy to read?

Getting specific

Fortunately, the Worldwide Web Consortium (W3C) has a set of Accessibility Guidelines. These include a method for us to know whether the background colour and text colour have enough contrast.

In simple terms this involves comparing the relative luminance of the two colours. The result is a contrast ratio. We should be aiming for a contrast ratio of at least 4.5:1 or higher between the background colour and the text colour at the minimum “AA” level. 7:1 or higher is required to meet the enhanced “AAA” level.

If our example were an icon or infographic then colours should have a minimum 3:1 contrast ratio or higher.

The formula to do this calculation looks like this.

We don’t need to get out a pen and paper to work out contrast ratios. There are many online checking sites that can do this for us. My favourite is whocanuse.com

Let’s return to our earlier examples. The contrast ratio appears next to each. None meet the minimum of 4.5:1 or higher.

Using a brand?

Now we know how to check that colours we use have sufficient contrast. What if we cannot choose the colours we use? An example is when use the colour palette of our University brand.

Our brand colours may be used in smart displays, leaflets, or websites. Around the University we see many inaccessible examples.

The answer?

I had an opportunity to experience the challenge of ensuring colour choices were both on brand and accessible. Adjusting Blackboard’s new theme to use brand colours in 2019.

Repeatedly looking up contrast ratios for a fixed palette is not efficient. I created a look-up table to make it quick and easy. The latest iteration is a web-based version which you can use on a computer or mobile device.

The matrix presents all the colours of our University brand. The columns represent the colour of the text, and the rows represent the background colour behind the text.

Using the matrix

Where a column and row meet, the cell shows identifies the contrast of the two colours. AA and AAA refer to the accessibility guidelines above. Either are suitable for the presentation of text, the AAA level is better. G means that the colour combination is suitable for graphical elements. These may be user interface components or icons. For those the accessibility guidelines recommend a contrast ratio of 3:1 or higher.

Naturally, colour combinations that are AA or AAA can be used for graphical elements as well. If F is shown that means the colour combination should never be used. F means Fail in this case.

A key benefit of making this an online tool is that we can show what good choices we can make. The matrix provides examples of every accessible colour combination.

Rather than creating the matrix as a one-off, it is built using a script. Any institution that has a brand colour palette is invited to get in touch with me. I can use the script to produce a matrix for their use. Already, almost twenty institutions from around the world have requested and received a matrix.

The matrix helps us to make accessible choices that are within a defined palette such as a University brand. It is also useful as a conversation starter. Did you know: of the 441 colour combinations within the University brand only 52 meet the enhanced AAA accessibility level? That’s only 12%!