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: 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.
- Colour contrast and accessibility
- Using colour
- Text considerations
- Text contrast good practices
- Checking colour contrast
- Further support
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.
Users must be able to easily perceive the content of course documents and learning resources.
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.
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.
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.
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
Example of a passed contrast check
For further support on Learning Space, or to report any issues with this guide, please get in touch with the Digital Learning Team via firstname.lastname@example.org. Alternatively, please refer to the numerous help guides found on our Knowledge Base.