Assisting Vision: Using Colour Shifting and Shading

Colourblindness is one of the more common issues that impact the usability of visual interfaces. It is estimated that 1 out of 20 visitors to a website have some type of colour vision deficiency [1].

There are many different types and degrees of colourblindness. Colourblindness can affect accessibility of any coloured materials, whether or not meaning is attached to those colours. Have you ever visited a personal website that you found impossible to read because of the font colour and the background? Or maybe you can read the content but it takes a lot of effort. Colour is often used to present content in a way that is thought to be more appealing to the reader. It is also used to attract attention to specific information. However, the problem is the reader might not be able to read the content because of the colour.

The following video gives an overview of the effects colourblindness has on people's lives.

This ADE first demonstrates the problem, and then demonstrates how colour shifting could provide a means to make multi-colour displays more accessible to people with colourblindness.

Note: JavaScript is needed for this ADE. See the Technical Help Page for guidance on enabling this technology.

What to do:

  1. The Colorblind Web Page Filter website provides a tool that allows you to enter a web page address and simulate what a web page looks like to someone with colour blindness. We will be using this tool for this activity.

    View the URL using the various filters and answer the following questions.
    1. Is the website accessible to users with colourblindness? Why or why not?
    2. List 3 problems that users with colourblindness may have using this website.
    3. What improvements can be made to resolve the problems you identified?
    4. Many people use colour to indicate importance or to put emphasis on certain words. How else can they communicate this such that those with colour blindness can understand as well?

  2. Go to the Colour Contrast website and complete the activity.
    1. How many of the words did you get correct?
    2. Did you have difficulty reading any of them? Why or why not?
    3. What criteria do you think should exist when choosing colours for foreground and background?

  3. Take the Colour Quiz and see the difficulties one can experience when it comes to colours.
    1. What difficulties (if any) did you have in answering the questions?

  4. There are tools available that shift the colours on the screen to colours that are visible to the user. In this activity, we will be using Ryobi System Solutions' tool called Visolve.

    Use this image of the stroop test [2] as the input. Try the various transformations on the three different simulations.
    1. For each of the simulations, which transformation(s) was helpful or made the most improvement to what a person with a colourblindness sees?
    2. In what way would this type of tool is helpful to those with colourblindness? Website developers?

What to hand in:

Hand in a report that answers the 10 questions above, as well as the feedback below.

  1. What were your expectations of this ADE?
  2. Did this ADE meet your expectations? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
  3. Did you feel that the video(s) for this ADE was appropriate? Why or why not? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
  4. Do you have any suggestions for other possible videos?
  5. Did you feel that the questions above got you to think about the real and serious issues regarding this ADE? Provide a rating between 1 and 7, where 1 means not at all, 4 means somewhat, and 7 means absolutely. Please explain your choice.
  6. If you have any suggestions on how to improve this ADE, please include it here.


[1] About Vischeck. 2002.
[2] The image was retrieved from