What do we mean?
Accessible means something is usable by as many people as possible, regardless of their cognitive, physical or cultural situation.
We have a responsibility as educators, as humans and by law to make content digitally accessible.
Contrast is a measure of the brightness difference between 2 colours.
Accessible Colour and Contrast
What should I do?
- In addition to colour, use other methods to convey information (e.g. labels and patterns)
- Avoid tricky color combinations
- Make sure there is enough contrast between different elements
Why do it?
- People who are blind, have low vision, or are colour-blind might miss the meaning conveyed by colours alone, so you need use other distinguishing factors too.
- Tired eyes work harder when colour contrast is poor, which can lead to eye-strain and headaches.
- For all users, accessing information encoded in multiple ways (joint use of colour with labels, line/pattern style) helps easy discrimination between different items.
How can I encode information and not only rely on colour perception?
Colour coding can be a useful way to discern information easily. However, for users who can't see perceive colour (approximately 1 in 12 males are colour blind), then there needs to be another way to access information. The strategies are based around either using additional text labels or additional visual elements (icons, patterning) to support the use of colour and are demonstrated below.
Everyone has a different perception of colour. However, based on known colour sight conditions colour combinations to avoid where possible are:
- Red and Green
- Green and Brown
- Blue and Purple
- Blue and Grey
- Blue and Yellow
- Green and Blue
- Green and Grey
- Green and Black
- Light Green and Yellow
- Avoid red/green or blue/yellow colour contrast combinations as these can appear to be low contrast for certain colour sight conditions.
- Avoid light text over a light backgrounds and dark text over dark backgrounds.
- Also ensure small text/lines have an especially high colour contrast.
- Text inside coloured text boxes: use a white/light background colour and a dark colour line around the box.
- When using colour in Microsoft Office use the default "Theme Colors" palette rather than the "Standard Colors". To find accessible templates, pick one of Microsoft's sample accessible templates or go to File > New and search for "accessible".
It's useful to think what would the figure/chart would look like printed if printed in greyscale (Black & White)? In addition to colour, it is important to:
- use labels to data lines, areas
- use patterns to distinguish areas and lines (stripes, dashes, dots)
- use different shaped plot markers (circle, triangle, square, open circle etc)
The default figures in Microsoft Office are inaccessible and reliant on colour perception- see our Accessible Figures Guidance for instructions on how to create accessible bar charts, pie charts, line/scatter plots in Excel.
How can I spot these issues?
- Use the Microsoft Accessibility Checker and Blackboard Ally (see later Checking your content section) to identify colour contrast issues.
- Think about how the material would present if it was printed in black and white - would you still be able to discern the meaning?
- In Windows 10, simulate how your content might appear if you don't have
colour vision: go to the Start menu > Adjust Colour Filters. Enable then scan your content with greyscale/specific colour blindness filter.
- On Mac, simulate how your content might appear if you don't have colour vision: select System Preferences > Accessibility > Display > Color Filters. Enable color filters then type "Grayscale".
- Use the Colour Contrast Analyzer, a free app that analyzes colors and contrast, and displays results immediately.