colour blindness & colour choices

Colour Blindness and considerations for Teaching

The differences in colour perception between people with normal vision and those who are colour blind could have a significant impact on access to learning if the colours used in graphs, diagrams and images etc. have been chosen without due consideration. It is therefore important to ensure equitable access to materials by choosing colour schemes carefully. 

It is possible, to some degree, to mathematically simulate colour-blindness so a person with normal vision can experience something like colour-blindness. Various tools are available that can be used to simulate colour blindness. For example:

Colour Palettes

The webpage ‘Coloring for Colorblindness‘ (David Nichols) allows you to simulate what a chosen colour palette looks like to viewers who are colour blind.

Colour simulation in web browsers

Plugins can be used to simulate colour blindness in your web browser. For example,  download the Chrome plugin ‘Colorblindly. When the plugin is activated, you can view your browser as someone who is colour blind may see it.

Checking Images

Various websites exist where you can upload an image to see what it looks like for someone who is colour blind.

For example: Pilestone, Coblis.

Mobile App Simulators

Apps that simulate colour blindness can be download for iOS or Android devices. For example, ‘Chromatic Vision Simulator’ uses your phone’s camera to create a realistic representation of color-blindness in real-time.

Colour combinations to avoid

The most common type of color blindness is red-green colour blindness, which results in difficulties distinguishing between red and green. Blue-yellow colour blindness is the next most common type of colour blindness, and this makes it difficult to tell the difference between blue and green, and between yellow and red. By far the rarest type of colour blindness is monochromacy, where no colours are detected.

Because red-green colour blindness occurs most frequently in the population, it is best to avoid using red and green as contrasting colours. People with red-green colour blindness will find it difficult or impossible to tell whether a colour is red or green, and shades of red and green may have very low contrast.

However, making relatively small adjustments to a colour scheme can make an enormous difference to how a person with red-green colour-blindness can tell the difference between the colours.

In the example below, the image in Panel A (left) shows a poor colour combination. The shades of red (hex code #FF0000) and green (#05FE04) used are not easy to distinguish for people with dichromatic red-green colour deficiencies (protanopes or deuteranopes).

However, if the red (#FF0000) used in panel A is changed to magenta (#D71B60), as shown in Panel B (right), whilst maintaining the green (#05FE04), the colour combination is immediately improved. The contrast between magenta and green (Panel B) is substantially better than between red and green (Panel A), and therefore the colours are more easily distinguished by people with red-green colour deficiencies.

Choosing Good colours for accessibility

Colour blind friendly palettes

Choosing colours suitable for colour blind people is essential for enhancing accessibility. In general, colors are easier to distinguish when they vary in lightness and saturation as well as hue. Various studies have used these criteria to define sets of colours that are optimal for colour blind individuals.

For example, the palette of eight colors shown below has good overall variability and can be differentiated by individuals with red-green color blindness. (Wong, B (2011) Points of view: Color blindness, Nature Methods 8, 441.)

Good combinations of colours for colour blindness

It’s always important ensure that any colour combinations used in teaching are accessible for people who are colour blind. You can double check your colours by referring to online colour simulators, as mentioned above. But here are a few suggestions:

 

Beyond colours

It’s good practice to ensure that colour alone isn’t the only thing used to convey meaning – where interpretation of the information is dependent on accurate distinction of individual colours. Instead, it’s important to add other ways to convey the same information besides just colour. For example, it may be possible to use text, symbols, or patterns.

  • In a graph, such as that shown below, bars could be distingished by both unique colours and patterns.
  • If colour is used to emphasise text, italics or boldface could also be applied.

These adjustments should be made whenever information is communicated – in slides, data figures, images, labels, equipment, etc. 

Additional online resources:

There are numerous useful websites that can be used to ensure that the best colours are used for accessibility:

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible:
Data Visualization with Flying Colors – For Biologists
Color Codes Chart: RGB and Hex Code for Website Accessibility

Department of Biochemistry