top of page

Is the colour of your elearning content AODA compliant?

Colour blindness, more accurately known as colour impairment or colour deficiency, is the inability to differentiate between certain colours. It’s estimated that about 8% of males and 0.5% of females are born colourblind. Colour blindness can also be caused by accidents (and other head trauma where permanent damage to the eyes occurs), or a number of diseases.

Colour blindness comes in three main types:

  • Red-green colour blind (difficulty with differentiating red and green hues),

  • Blue-yellow colour blind (difficulty with differentiating between blues and greens, and between yellows and reds), and

  • Total colour blindness (also called total monochrome vision).

Red-green colour blindness is the most common, affecting about 95% of all colour blind people, while the two remaining types make up the remaining 5%, and total monochrome vision is extremely rare.

As a designer, we don’t have to go farther into the science of how colour blindness works or its causes, but if we keep in mind the most common problems with colour impairment we can avoid designing graphics that are difficult for people with this problem to see.


In general, most colour blindness affects how many different shades of a colour a person is able to perceive, and can also cause confusion between two different colours with similar shades. ‘Safe’ colour combinations are red and blue, or yellow and blue. Best practices would be to avoid using colour coding, colour shifts and colour contrasts to differentiate information.

For instance, a common use of colour shift is on hover effects. A button that changes colour when hovered on may not be easily read by a person with a colour impairment. However, just about everyone can perceive changes in brightness just fine regardless of their colour vision, so an effective hover state would be to change it to a much brighter or darker colour than the original. Adding another type of visual cue such as a stroke, drop shadow, reflection, pattern or something else to make the visual difference stronger will help learners with regular colour vision as well.

Consider also the colour of the text you are using, and the colour of the background it’s on. Is the contrast between the two high enough? Are the two colours incompatible?

You can check whether your text and background colours are accessible with these websites:, or Simply enter the hex colour codes for your text and background, and the sites will let you know if the combination is accessible or not.

To learn more about how to design accessible eLearning and the eLearning and technology training solutions offered by Pathways please contact us at

Featured Posts
Recent Posts
Search By Tags
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
bottom of page