Category: Co-design & Design tools

Colour blindness is an eye condition that changes the way people see colours. It doesn’t seem like a big thing to people who have normal colour vision. But when it comes to reading things like maps, it matters a lot. Graphs, maps, diagrams and other graphic information types often rely on colour to differentiate between elements and features.

With genetic colour blindness, men are about 16 times more likely to be affected than women. Injury or disease can also affect the ability to see certain colours.

Apart from genetic reasons, some health conditions increase the risk of developing colour blindness later in life. Macular degeneration, glaucoma, diabetes, dementia, and Parkinson’s disease can all affect colour vision. Because it happens later in life it often gets unnoticed and undiagnosed. Some medications might affect colour vision too. For more, see My Vision guides.

You are at greater risk of colour blindness if you are a white male and have family members with colour blindness.

Red-green colour vision deficiency occurs in 1 in 12 males with Northern European ancestry. For women it’s 1 in 200.

The Axess Lab website has some great tips for making graphics more inclusive. For example, putting text into pie charts, and labelling goods with colours not just showing them. Colour contrast matters too as you can see in the picture below.

Colours that are accessible

Colour is an important part of designers’ creative work. When it comes to colour accessibility the creative path takes a few twists and turns. That’s because people who say they are ‘colour blind’ are not all the same. Most can see some colours, but not all of them. So how can designers choose colours that are accessible, especially in digital communications?

Adobe has a blog page that explains the importance of choosing colours. Four images show the three different versions of colour vision deficiency, which are:

1. Protanopia: Referred to as “red weakness,” this variation of red/green color blindness results in individuals being unable to perceive red light.
2. Deuteranopia: Also known as “green weakness,” this type of red/green color blindness renders people unable to perceive any green light.
3. Tritanopia: People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors. This form of color blindness is far less common than its red and green counterparts.

Graphic designers will appreciate the colour wheels and ways to avoid a conflict of colours. Examples of good colour choices show that designs can still be attractive as well as functional. You can try out the online Material Design accessible colour tool that provides information on colour contrasts for visual material. 

Readability and colour choice

Colour choice is also a factor in readability. The video below shows how easily we can be deceived by our eyes. It shows how two different shades of grey are actually the same. That’s why you can’t rely on judging contrast by eye.

Colour contrasts can be deceiving because we are subject to optical illusions. The video below shows how two different shades of grey are actually the same. That’s why you can’t rely on judging contrast by eye. Fortunately there are colour checkers to help with colour choices especially for websites. And why do you need colour contrast checkers? Because more than 8% of the population has colour vision deficiency (colour blindness). 

UPPER CASE is not good for readability

Colour choice is one factor in readability. Others include using sentence case. Using upper case or capitals does not convey important messages more urgently. The image shows that using upper case to indicate a low bridge did not stop a truck driver from driving under it. Upper case is harder to read because the shape of the words are unfamiliar. 

Colours for reading and learning

The processes of how we read text has an impact on how we take in information. Colour coding can help readers quickly identify key information and assist their reading and writing. Colour coding has gained popularity in classrooms to support student learning and reading.

The title of this paper is, What Color Scheme is More Effective in Assisting Readers to Locate Information in a Color-Coded Article?

From the abstract

Color coding, a technique assigning specific colors to cluster information types, has proven advantages in aiding human cognitive activities, especially reading and comprehension. The rise of Large Language Models (LLMs) has streamlined document coding, enabling simple automatic text labeling with various schemes.

This has the potential to make color-coding more accessible and benefit more users. We conducted a user study assessing various color schemes’ effectiveness in LLM-coded text documents, standardizing contrast ratios to approximately 5.55:1 across schemes. Participants performed timed information-seeking tasks in color-coded scholarly abstracts.

Results showed non-analogous and yellow-inclusive color schemes improved performance, with the latter also being more preferred by participants. These findings can inform better color scheme choices for text annotation. As LLMs advance document coding, we advocate for more research focusing on the “color” aspect of color-coding techniques.

Website readability

The most accessible websites are those that have an Easy Read option.  A good example is the My Allied Health Space. At the top of the home page is the symbol for Easy Read and this is where you click to turn it on.  Below is first, the standard webpage followed by the Easy Read webpage.

My Allied Health Space home page with option for Easy Read at the top of the page.

Thanks to Dr Em Bould, Senior Research Fellow at Monash University for the inspiration for this post. Dr Bould has great advice on this topic based on research.   

More people have difficulty reading than most people think. Low vision, dyslexia, low literacy, and learning disabilities are some of the reasons. Previous posts have covered the topic of plain language and Easy Read. But choosing the right typeface is also important for communicating successfully. Without understanding typefaces, things like colour contrast will make little difference. 

Gareth Ford Williams explains key elements in his article. He says claims of some typefaces being more accessible than others are not backed up by evidence. 

Different typefaces provide different styles in how letters are formed. For example, Gill Sans upper case ‘i’ and lower case ”l’ and ‘1’ look the same. However, in Verdana they are distinct from each other. 

Mirroring is something than young children do. For example, muddling ‘b’ and ‘d’ and ‘p’ and ‘q’. However, the letter flipping effect can be lifelong. 

Spacing or ‘visual crowding’ is another consideration. Some typefaces have the same space between letters regardless of letter width. Helvetica is one example. Calibri has different spacing between letters. A wide letter like m has more space around it than an i or a t. In some cases the letters can look joined up such as ‘ol’ or ‘vv’. Tight letter spacing is not great for people with good vision either. 

The article has several good examples to illustrate points made. The title is, A Guide to Understanding What Makes a Typeface Accessible. Williams makes the point that there is no one right typeface. As always, it depends on your audience. However, this article provides great insights into yet another aspect of communicating accessibly. The article is technical in some places.

Thanks to Dawn Campbell on Linked In for alerting me to this article.