How to check colour contrast for accessibility

If you are using coloured text and backgrounds in your resources, it’s important to consider whether they are accessible for people with visual impairments or colour blindness. There must be sufficient contrast between the colours you are using. Essentially, this means using dark text on a light background, or light text on a dark background. But if you need to know exactly how dark or light, you can either use an accessibility checker on your document, or test the colours themselves with a contrast checker.

Accessibility checkers

Both MS Word’s Accessibility Checker and Blackboard Ally will alert you when they think you are using insufficient contrast in your text.

Microsoft Word

The easiest way if you are working in Word is to use the inbuilt accessibility checker to check for issues as you go along. In Word 2019 Go to the ‘Review’ tab and click on ‘Check Accessibility’.

Screenshot of location of Accessibility Checker

In Word 2016 select File > Info > Check for Issues > Check Accessibility.

This will open up a pane next to your document which will tell you about any accessibility issues, including contrast. Once you have corrected the issue, the notification will disappear.

Blackboard Ally

In Blackboard Ally, once you have uploaded a document, you should see a coloured gauge giving you an idea of how accessible it is (you may have to refresh the page if this doesn’t show up straight away). Clicking on it will give you a more detailed description of the issues.

Screenshot of Blackboard Ally

You can’t fix the colour contrast directly in Ally; you will have to download the document, change the text colour and upload it again.

Contrast checkers

If you’re not using Word or Blackboard, or you just want to know in advance what colour combinations will have the right contrast, you can use an online contrast checker. There are a variety of tools available online but we like the WebAIM contrast checker.

A note on how colours are specified: you will usually see them written as Red, Green, Blue values, for example 255, 0, 0, which would be a pure red, or 131, 11, 200, which gives a particular shade of purple. But you might also see them written as something like #FF0000 or #830BC8. These are hexadecimal colour codes, and they are actually the same thing. It’s just a way of representing the three digits of each RGB value in two digits. Here’s a 60 second video on hex colour codes if you really want to know.

In the WebAIM interface you can either type in the hex code under where it says ‘Foreground Color’ or ‘Background Color’, or click on the colour box next to it to bring up a colour picker.

Screenshot of WebAIM contrast checker

If you want an exact match and you only have the RGB values, don’t worry, you don’t need to convert it. Just go into the colour picker and type in the values.

Screenshot of RGB values on the colour picker

You will get a preview and a Pass or Fail. Notice with this darker background, the contrast is insufficient for normal text but would be acceptable for large text (at least 18pt, or 14pt bold). Notice also that there are two standards, AA and AAA. We only need to meet the AA standard.

Screenshot showing the preview of normal and large text

If you use this tool alongside Word or Blackboard, be aware that Word uses RGB values, and the Blackboard text editor uses hex codes.

For more about creating accessible documents, see the staff intranet.

 

Photo by Felix Dubois-Robert on Unsplash