How can we make accessible text colour choices at the University of Southampton?

When text does not have enough contrast, it is hard to read. This not only affects those who have a visual impairment but can also make situational impacts worse. For example, if we try to read text on a screen in poor lighting conditions (too much or too little light), low-contrast text can make it even more difficult.

In the latest WebAIM survey of the million most popular webpages, low contrast text was found on 83.6% of pages. Here at the University of Southampton, materials uploaded to Blackboard have over 140,000 contrast issues and it’s also common to find contrast issues on the University website.

How do we measure text contrast?

The Worldwide Web Consortium (W3C) has a set of Accessibility Guidelines, which include a method for checking whether the background 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 to meet the minimum “AA” accessibility requirement. Ideally we should aim for a contrast ratio of 7:1 or higher to meet the enhanced “AAA” level.

How can I check that I am using sufficient contrast?

If you use a University PC it’s easy to find out if text, you are composing has sufficient contrast.

1. From Additional Software on the desktop, install the TPGi Colour Contrast Picker.
2. When you open this tool, you can enter the code for a foreground and background colour or use the colour dropper to look up a colour.
3. The tool will tell you if your colour combination passes the Web Content Accessibility Guideline for text contrast and at which level.

Top tips

Here’s a list of other useful strategies, tools and websites that can help you to present text in an accessible way.

1. A straightforward way to think about it is that dark text on a light background or light text on a dark background are likely to have sufficient contrast. For example, white text on a yellow background is highly unlikely to be sufficient, but black text on a yellow background should.
2. If you are using the University brand, you can quickly find out which colour combinations meet accessibility guidelines.
3. If a colour combination does not have sufficient contrast, the Tanaguru contrast finder can help you to find accessible alternatives.
4. Putting text over an image? The Optimal Overlay Finder will help you identify what level of opacity should be added between the image and the text to ensure the text has sufficient contrast.
5. Writing content with links but don’t want to underline your links? Use the WebAIM Link Contrast Checker to find out if you have enough contrast between the body text and link text so that there is sufficient contrast that an underline would not be necessary.