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.

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.

Additional information


Updated on: 8 September 2022