Designing For Colour Accessible-Learning

inspire group colour accessibility

What is colour accessibility? 

Some colours are easier to differentiate than others. This is especially true for colour-vision-deficient (colour-blind) people, but also the rest of us, especially when projected on a screen or photocopied.  

Colour accessibility enables people with colour vision deficiencies (colour blindness) to interact with experiences in the same way as non-visually-impaired counterparts. It enables this by consciously designing colour schemes for text, images, infographics and maps to be as easily distinguishable and understandable as possible. 

How does colour accessibility affect learning? 

Today, approximately 1 in 12 men (8%) and 1 in 260 women (0.38%) are affected by colour vision deficiency. If up to 10% of our potential learners are missing the point, this has a big impact on the success of their learning and your business. If we can apply certain principles to our learning that work for more people, the learning will be more effective. 

5 tips to design better learning for colour-vision-deficient learners
 

  1. Use both colours and symbols: Most of the time there’s no need to rely on colour alone to convey a message. Use text or symbols if possible as well. Designs that use colour alone to convey certain information or certain colour combinations may not be accessible to colour-blind people. 
  2. Keep colours minimal: Limit your colour palette to 2 or 3 colours to avoid confusion.
  3. Use patterns and textures to show contrast: Patterns and textures can show contrast in graphs and charts where text is not able to be added.
  4. Contrast your colours and hues, avoiding bad colour combinations: Use a range of contrasting colours and hues in your design and avoid bad colour combinations. Here are some colour combinations to avoid:
    – green and red
    – green and brown
    – blue and purple
    – green and blue
    – light green and yellow
    – blue and grey
    – green and grey
    – green and black
  5. Use thicker line weights: Sometimes a larger font size or line weight can make a design accessible for learners.

 

Put your learning designs to the test 

There are several websites which let you upload an image and see what it would look like through the eyes of people with different types of colour vision deficiency. 

Coblis 
Coblis developed manipulation-algorithms to fake any form of colour vision deficiency. The algorithms transform any picture into the same picture as seen by red, green, blue or completely colour deficient people. See an example below of how the simulator works.  

 coblisexample-1

coblisexample-2

These categories wouldn’t be distinguishable to learners with red/green colour deficit. It’s fine in this situation because we use text and colour, but in other situations this could impact on their learning. 

 

Colorbrewer

Colorbrewer is a great tool, especially for infographics/maps, as it lets you choose your categories (colour-vision safe, print friendly, photocopy safe, and the type of dataset – sequential, diverging or qualitative). It also explains the categories/specifics if you want to learn more. 

colorbrewer

Image source: labrigger

Material Design Color Tool

Color Tool is a beautiful tool which allows you to create and share colour palettes for your UI, and measure the accessibility of any colour combination.

color tool

color tool 2

color tool 3

Testing for colour vision deficiency 

The Ishihara test is one of the most common and reliable tests you can use for testing colour vision deficiency. Simply look at a set of images called the Ishihara colour plates, a series of images, which have numbers embedded in dots of colour. The numbers are a different colour than the background. If you can’t see the numbers, there is a chance you could be colour-vision deficient. 

Analogies 

Colour vision deficiency in sport 

In New Zealand there are about 200,000 colour-deficient people. Think about how frustrating it would be for someone in a sports team where a single colour is used to represent that team. For example, picture playing rugby for the Manawatu Turbos (a New Zealand provincial rugby team which uses green as their representative colour) and you’re up against the Canterbury Crusaders (a New Zealand provincial rugby team which uses scarlet as their representative colour), if you had a colour vision deficiency, you wouldn’t be able to distinguish one player from another. 

sport-normal vision

Normal view.

sport_DEUTERANOPIA

Deuteranopia view.

sport_PROTANOPI

Protanopi view.

sport_TRITANOPIA

Tritanopia view.

Colour vision deficiency and navigation

Imagine trying to use the London Underground map to navigate when you can’t see clearly where each subway line goes. Take a look at the examples of the London tube map below (image source: tfl). 

Here is an example of the tube map in standard colour:

colour tube map

Here is an example of the tube map in black and white:

colourtubemapbw

To help colour-vision-deficient customers, Traffic For London (tfl) designed a version of the tube map which would be easier for these customers to follow. Here’s an example of the tube map for colour vision deficient customers:

Blackandwhitetubemap 

Conclusion  

We should be making learning as easy and accessible as we can for our learners. While there is no one-size-fits-all approach when it comes to learning, there are simple principles which you can apply to your learning that will help. 

 

Find out more: 

Why Color Blindness is No Longer a Problem in Web Design  Alex Bulat 

Designing maps for the colour-vision impaired  Bernhard Jenny and Nathaniel Vaughn Kelso

Color Design for the Color Vision Impaired  Bernhard Jenny and Nathaniel Vaughn Kelso 

Ishihara David Lockhard  

Mary-crooks

Mary heads our crack team of learning designers in the Wellington regional office. She has a way of cutting to the chase, making learning quick, easy and engaging. With her former life working at National Geographic, Mary will skilfully help you architect a learning solution, avoid potential pitfalls, and discover new ways to skin a proverbial cat. Not a real cat, because that would be wrong.

Phone: +64 4 471 4647 ext. 885  Email: mluteyn@inspiregroup.co.nz

Leave a Reply