Making Online Content Accessible: Free apps to help you check contrast and make text more readable

Author:  Simon Hawkesworth, TELT

When we’re designing online content, one of the key considerations is ensuring that the text is easily readable. One characteristic that can affect readability is the contrast between the text and the background.

Contrast Ratio 

The colour difference between text and background is sometimes described as the contrast ratio. As an extreme example, black text on a black background gives a ratio of 1:1 and is clearly unworkable. If you’ve ever tried to view the Blackboard VLE using Internet Explorer, you’ll find that several buttons have a particularly annoying contrast ration of 1:1 (black on black) and are unusable. By comparison, black text on white has a ratio of 21:1 and is considered to be amongst the most readable colour combinations.

For online content, the W3C guidelines for body text recommends a minimum contrast ratio of 7:1. For larger text, such as on main headers, a ratio of 4.5:1 should work well.

The majority of applications have text that defaults to black. However, if you want to make your text something other than this, to add emphasis, distinguish between content or include a background other than white, then you need to ensure that the contrast is good enough. It doesn’t mean that you shouldn’t inject design ideas and innovation into your work, but when you adjust either the text or the background, you need to check if the content is readable.

 Checking Contrast

You can assess the contrast by eye, but if you want to ensure that content meets established W3C (World Wide Web Consortium) guidelines for accessible content, then thankfully, there are some useful technological aids around, and the applications given here, can be used to check contrast while you’re in the process of designing resources:

Colorable: www.jxnblk.com/colorable/demos/text/

Color Safe: www.colorsafe.co

Color Contrast Checker: www.webaim.org/resources/contrastchecker/

Check My Colours: http://www.checkmycolours.com

Colour Vision deficiency (Colour blindness)

Another consideration, is for users with colour vision deficiency (CVD) (or colour blindness, as it’s often referred to), who struggle to distinguish between certain colours. The variants on this condition can include the inability to distinguish between shades of red, yellow and green, or that colours can seem much duller than they would appear to someone with normal vision. So, when thinking about text and background colour, this should also be taken into consideration.

To help you, there are a number of online applications that can help to check if your design is going to be problematic for people with CDV. An example of a checker is Colblindor.

Making these kinds of adjustments to your content to doesn’t have to detract from the quality of the materials you produce, and in the process, you’re ensuring that your users are able to benefit from all the work you’ve put in.