Overview 

Contrast and colour use are vital to digital accessibility. Accessible content benefits everyone. This guide provides some low-effort tips on colour and text contrast that you can apply to improve text readability of your learning resources and will also result in a higher accessibility score with Ally.

Note iconNote: Ally is the built-in accessibility tool in Learning Space. Ally's contrast checker verifies if there is enough contrast in a document between the text colour and its background colour and assigns an accessibility score to that resource. Text with poor contrast can be difficult to read for everyone, but especially for students with visual impairments such as colour blindness. Ally uses the contrast requirements specified as part of the WCAG 2.1 AA guidelines. For more details on Ally, view the Make documents accessible on Learning Space guide. 

Contents 

Colour contrast and accessibility 

In the simplest terms contrast is a measure of the difference in perceived luminance or brightness between two colours, one being the background and the other the foreground. For example, yellow text on a white background would be considered low contrast and more difficult to read than black text on a yellow background which would have greater contrast.

2 yellow circles, one with black text and the other with white to demonstrate differences in contrast

Users must be able to easily perceive the content of course documents and learning resources. 

Using colour 

Don't let concerns about accessibility prevent you from using colour effectively, but do not solely rely on colour as a way of conveying meaning, such as green for go or red for stop.

To make a quick assessment of your document or learning resource, consider if the colour was removed, would any meaning be lost? If so, you will need to use additional means of conveying that lost information.

2 graphics demonstrating how colour can be used to convey meaning. Graphic 1: A green button with the text start. Graphic 2: three coloured circles red, yellow and green with no text but could be interpreted as red for stop, yellow for wait and green for go.

Some colour combinations are problematic for people with colour vision deficiencies. Use colour schemes that provide good contrast between text and the background and be mindful of red/green colour-blindness, the most common type of colour-blindness. This vision deficiency does not mean that red and/or green cannot be seen, but that certain shades of red and green may be difficult to differentiate or perceive.

Text considerations 

Everyone should be able to read your documents or learning resources. It is important that the text can be clearly seen and is legible.

Ensure that images and diagrams have good contrast and avoid using patterned backgrounds.

2 squares with patterned backgrounds, 1 with black text written on a white rectangle to increase legibility and the other contain white text which is difficult to read.

Text with poor contrast can be difficult to read for everyone, but especially for people with visual impairments such as colour blindness.

Ally's contrast check verifies whether there is enough contrast between the text colour and its background colour. Ally uses the contrast requirements specified as part of the Web Content Accessibility (WCAG) 2.0 AA guidelines. As well as being a legal requirement, adhering to the guidelines will ensure that the greatest number of people can view your content.

Text contrast good practices 

There are many low effort adjustments you can make to improve the readability of text in your documents or learning resources.

  • Consider using fonts with wider character strokes such as sans serifs
  • Avoid using font sizes below 10pt or 14px
  • Use dark text on light backgrounds
  • Use light text on dark backgrounds

Avoid the following colour combinations which Ally will flag colour contrast issues with:

  • Green and red
  • Green and brown
  • Blue and purple
  • Green and blue
  • Light Green and yellow
  • Blue and grey
  • Green and grey
  • Green and black

Checking colour contrast 

The Colour Contrast Analyser from The Paciello Group is a free desktop tool for checking your documents or learning resources as well as the free browser based WebAim Contrast Checker. Both tools will show you whether foreground and background colours have sufficient contrast. If you are presented with a fail, colour sliders on the tools will assist you with finding a colour to pass the WGAG AA colour contrast threshold which you can then apply to your documents or learning resources.

Example of a failed contrast check

An example of a contrast check fail due to insufficient contrast ratio.

Example of a passed contrast check

An example of a pass in WebAim Contrast Checker due to sufficient contrast ratio.

Question mark iconFurther Support 

For further support on Learning Space, or to report any issues with this guide, please get in touch with the Digital Learning Team via dlsupport@falmouth.ac.uk. Alternatively, please refer to the numerous help guides found on our Knowledge Base. 

View the Accessibility Statement for all of our support guides.