Accessibility and Contrasting Colours

Do you want to exclude the visually disabled from your e-learning content? Do you want to discriminate against the disabled? I am guessing you would answer “no” to both of these questions!

If you are developing e-learning for the New Zealand government, you are required to develop for accessibility, meeting the NZ Government Web Accessibility Standard 1.1:


Web accessibility is about inclusion — making sure everyone, including people with disabilities and those using assistive technologies, can access online information and services.

All public service and non-public service agencies must meet the NZ Government Web Accessibility Standard 1.1. (Accessed 16 September 2019)

If you do not design for accessibility, it could be judged a violation of the Rights of Persons with Disabilities:

And the UN Convention on the Rights of Persons with Disabilities, which New Zealand has ratified states that we must recognise “the importance of accessibility to the physical, social, economic and cultural environment, to health and education and to information and communication, in enabling persons with disabilities to fully enjoy all human rights and fundamental freedoms.” (Accessed 16 September 2019)

So, create content for those with disabilities because it is the inclusive (and right thing) to do, because the government requires it (if you are developing for government use) and because there are risks for not creating accessible content!

How do you create accessible e-learning content? There are a number of elements, but this post will brief look at contrasting colours for the visually impaired. There are a number of tools for checking that the colours you want to have high enough contrast. I like this simple tool:

Put the specified colours in the correct fields and see what result is generated. I picked a blue background sidebar with yellow and white text. As white is a higher contrasting colour from blue than yellow, I checked only the blue and yellow:

Accessibility and Contrasting Colours Tool
Accessibility and Contrasting Colours Tool

Using these contrasting colours on this website (it might have changed since I created this post), I have made the left sidebar blue, with white text and yellow headers. Checking the colours before using ensures that this aspect of accessibility is met.

Accessibility Colour Contrast
Accessibility Colour Contrast

Creating e-learning content that meets contrasting colour requirements is as easy as this, but consider all elements on the page!

Not only are you creating more inclusive content, but by using high contrast colours, you are lessening the eye strain for all users – a win for everyone! There is no reason not to build for accessibility!

Instructional Design and e-Learning Resource Site

I was speaking with a colleague the other day who is struggling to understand the process of e-learning creation. This person has a background in teaching and instructional design, but is having difficulty making the leap into e-learning development. We spent quite awhile over coffee, as I discussed the process I use in online learning creation and at the end of this discussion, it came to me to create this site.

This is going to be a place where I discuss anything of interest to me in e-learning. Sometimes I will also pull in other topics close to my heart – such as mental health – perhaps using them as example topics in developing content.

Time to begin planning some future posts!

To strive, to seek, to find, and not to yield.

Jerry Jordan