Colour contrast ratios we should use. 3:1 or higher for graphics, 4.5:1 of higher is the minimum for text. 7:1 or higher is meets an enhanced level.

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.

A box with a yellow background and white text reading "Your Feedback".  The low contrast means it is difficult to read.

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:

The same image as above, but made harder to read due to screen glare.

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.

Two boxes, one with a yellow background, and the other grey.  In white text is "Hard to read" the low contrast means the text is hard to read.

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?

Two boxes, one green and one red.  White text within each box reads "Hard to read?"  The contrast is better than the previous example but many will find these images of text to be hard 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 ratios to remember are:
3:1 is the minimum for graphical objects and user interface components. 4.5:1 is the minimum for test, while 7:1 is the enhanced level for text.  These are based on Web Content Accessibility Guidelines 1.4.11, 1.4.3, and 1.4.6

The formula to do this calculation looks like this.

Formula for determining contrast ratios.

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

Whocanuse.com website with two colours, white (Hex code #FFFFFF) and grey (Hex code #9FB1BD)
Whocanuse.com results for above colour contrast.  Contrast Ratio is 2.21:1, WCAG rating: Fail.  How this colour combination affects impairments such as Protanomaly, Protanopia, and Deuteranomaly are also shown.

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

Two boxes, one with a yellow background, and the other grey.  In white text is "Hard to read". The yellow box has a 1.64:1 contrast ratio with the white text, while the grey box has a 1.84:1 contrast ratio.  The minimum required is 4.5:1.
Two boxes, one green and one red.  White text within each box reads "Hard to read?"  The contrast ratio of the the green box with white text is 2.71:1, and of the the red box with white text is 4:1.  The minimum is 4.5:1.

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 University brand contains 21 colours including white. They are themed by "Neutral colours" based on grey, "Marine colours" which range from Blue to Green", and "Horizon Colours" which range through yellow, red, and purple.  Three colours are referred to a web colours, which are a dark blue, rich green, and flat red.

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

Hartley Library Smart Display: a touch screen with 4 buttons, each has a white icon over coloured square.  The contrast ratios are shown, all of which are below 4.5:1.
A promotional poster for Office 365.  6 blocks of colour each have white text on them.  The contrast ratio for 5 of these is below 4.5:1.

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.

Blackboard interface "before" and "after", on the left is the "out of the box appearance of Blackboard, on the right is the version that has the University colour scheme applied. Numerous other improvements can be seen which improve the user experience.  These include a large avatar image, larger and more meaningful logout button, and an accessibility toolbar button.
Left: Default Blackboard user interface.
Right: Blackboard user interface aligned with University brand.

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 colour matrix is shown on a computer monitor and mobile phone.  Because it is responsive it works well on both devices.

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.

Zoomed in view of matrix.  This shows more clearly a smaller number of columns and rows, and their individual cells.

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.

A foreground colour and background colour are shown along with sample text, a contrast ratio, and WCAG rating.

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%!

How can I use colour accessibly?

Post navigation


What do you think? Leave us a comment to share your thoughts...

%d bloggers like this: