Following on from two blog posts: Disability Services (May 10th) and Assistive Technologies (May 17th) at Queen’s University and some posts on:

We want to continue with consideration of audience members with specific needs and content design.

This week, we start off considering audience members living with colour blindness. If you are a content creator, this post will guide you towards considering different audience member needs and designing content to be inclusive.

Colour blindness

If someone is colour blind, they experience colour deficiency in their vision. By colour deficiency, we mean the person has difficulty identifying and distinguishing between particular colours.

Most people living with colour blindness can see the world clearly but sometimes they cannot see colours along one or more of the following hues: red, green or blue. There are rare cases where some people cannot see any colour and are living in a world of monochrome (black and white).

Typically, colour blindness can be split into three categories:

  • Red/green
  • Blue/yellow
  • Monochromacy (complete colour blindness)

Audience members living with monochromacy may also experience low vision. They may use a screen magnifier and/or a screen reader to assist them.

Red/green colour blindness

This is the most common type of colour blindness. There are four types of red/green colour blind categories:

  • Deuteranomaly (green looks more red)
  • Protanomaly (red looks more green and not as bright)
  • Protanopia (can’t tell red and green apart)
  • Deuteranopia (can’t tell red and green apart)
Accessible design for the colour blind

Accessibility is an important topic to ensure the digital content we create is accessible for all users. This requires adapting materials and this should be embedded into our practices.

Let us ask, if you were colour blind what teaching materials could you not use effectively? Red text used to highlight key points in the text may be ineffective. Graphs relying solely on colour may not be effectively viewable. Visual content may contain too much colour and descriptions may not be adequate to learning.

Taking this into consideration, let’s look at practices to avoid and include as content creators.

Practices to avoid

Please avoid the following practices when designing content for audience members with colour blindess:

  • Photographs missing useful descriptions
  • Lack of contrast
  • Alert messages
  • Correct/incorrect feedback (colour)
  • Required form fields
  • Graphs
Photographs missing useful descriptions

Imagery holds an array of colour. Some of these colours might not be seen as you intend by audience members living with colour blindness. It’s also prudent to not give instruction like ‘note the person in the red coat’. This can be missed and is therefore a disadvantage.

Use more description. By being more descriptive with explanations, i.e., ‘see the male/female adult on the top left of the image wearing a coat, facing left/right, etc.’.

This explanation didn’t rely on colour and most sighted people should be able to follow the description. When it comes to ALT Text descriptions, the same explanation could be inserted as the image description for audience members living with blindness, low vision, D/deafness and it’s good practice.

Yes, this takes a little more time to complete and as an academic, you know the learning point you want to convey. You are the perfect person to create the description.

Take a moment or two and add in the ALT text descriptions to visual content. It might also be you re-use content elsewhere in PowerPoints and if ALT text descriptions have been provided already, the item can be copied / pasted into other PowerPoint content.

Lack of contrast

Take a full colour image and make it into black and white. How many of the tones of the black and white are the same or similar shade of grey?

You may be able to see from the example below, the colour image on the left has green, red, orange and blue strips of paint (from left to right). For audience members with complete colour blindness, they may see the image on the right completely in shades of grey.

How might they identify the orange paint? And in terms of contrast, the red and orange paint are the same tone when in black and white.

Credit: David Pisnoy
Credit: David Pisnoy

By amending the brightness and contrast of the colour image, this affects the tones when the colour image is made black and white (B&W). This has made the B&W strips different shades of grey, as you can see below:

Credit: David Pisnoy
Credit: David Pisnoy

This still doesn’t get around how does a person tell the orange strip. Thankfully there are assistive technologies (ATs) available which can speak the colour someone selects but more on this later.

Let’s look at colour and contrast in relation to text. When using text, it’s prudent to use darks text against light backgrounds (or vice versa). However, red text on a green background of similar colour strength may be problematic for audience members living with colour blindness, the text can disappear altogether as can be seen below.

Red text on green background (top) and made into black and white (bottom)
Red text on green background (top) and made into black and white (bottom)

This is where the colours brightness and contrast comes in. Use darker and lighter colours which contrast well against each other. In the example below, we used a darker red and brighter green. When made black and white, there’s contrast between the text and background.

Red text on green background (top) and made into black and white (bottom)
Red text on green background (top) and made into black and white (bottom)
Alert messages

When we think about alerts, we may think of danger and the colour red. The colour red can be useful to highlight a message and draw our attention to particular parts of the screen. However, this relies on colour and those with red/green colour blindness may miss this important cue.

Think about how alert messages can be created without relying on colour. Use symbols in the alert messages to draw attention to the alert. Pop up messages may be considered effective to some designers. However, pop up messages may not get picked up by screen readers and the pop up will block the content which blind / low vision audience members are trying to access.

So an advantage to audience members with colour blindness (using pop up) will disadvantage audience members using screen readers (screen readers may not read the pop up and the message needs to be keyboard controlled for closing the message). It’s important to use a design solution to benefit all audience members.

Also, advise audience members living with colour blindness of the smartphone Apps and browser plugins available to assist them (see the Assistive Technology section below).

Correct/incorrect feedback (colour)

When creating quizzes, quite often red and green are used for visual feedback. Green as correct, red as incorrect. Sometimes this might be a green tick and red ‘X’. The tick and ‘X’ are more appropriate as it doesn’t matter what colour they are but they still provide visual feedback.

Symbols are good to use here as they can visually indicate a right/wrong answer without relying on colour. Remember to label (ALT Text) any symbols you create for users of screen readers.

Another consideration of using red and green, how well does the text on the colour contrast? See the Lack of contrast section above.

Required form fields

How many times have you completed a form which didn’t submit as you’ve missed a required field within the form? How was it highlighted? A red asterisk / exclamation mark, red outline or pop up message?

Red outlines are not the best design consideration here. Using symbols such as asterisks and exclamation marks are better design but these can be missed as they are small and easily overlooked. Pop up messages should be avoided as per the Alert messages section above.

If possible, use visual indicators such as shapes / symbols but larger than asterisks and exclamation marks. It’s also important these shapes / symbols do not rely on colour. If forms are a regular occurrence for your students, use the same shape / symbol to build up familiarity and keep the shape / symbol consistent.

This might be a discussion point to agree a shape / symbol among colleagues as academics deliver modules within degree programmes and it would be good to keep it consistent.

Graphs

When creating infographics, charts, graphs, etc., typically the legend is colour coded. Why not also use pattern along with this? If the visual content appears as black and white, the pattern is in the legend and benefits more audience members.

Remember infographics, charts, graphs, etc. are visual content and the ALT Text description should be completed for these as well.

Now let’s have a look at practices to include when creating content.

Practices to include

The following practices should be incorporated into your workflow when designing content for audience members with colour blindness:

  • Text
  • Text readability
  • Background images with overlaid text
  • Recognising links
  • Highlighting key concepts using alternatives to colour
  • Provide speaker notes (MS PowerPoint)
  • Color combinations
Text

We’ve covered why text accessibility is important in previous posts and include a link here to Hacking Accessibility: Text for you to refer to.

However, to consolidate text accessibility, text size should be minimum size 12 (MS Word) and 24 (MS PowerPoint body content). Text should have good contrast of text colour against the background. Line spacing should be set to 1.5 and left aligned.

However, do read the previous post for more in-depth information.

Text readability

Text should be readable and pass accessibility guidelines. By readable text, we base it on the colour combination of text and background colours and text size:

“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).” 

— WebAim color contrast checker
Background images with overlaid text

Images with overlaid text is problematic as part or all of the image may have insufficient contrast and too many colours for the text to stand out.

Example of white text on a photo background
Example of white text on a photo background

What can you do? One solution is to reduce background brightness (make the image darker) to increase text contrast and makes text more readable.

Example of white text on a darkened photo background
Example of white text on a darkened photo background

Another solution is to provide a text outline, i.e., white text outlined in black.

Example of white text with black outline on a photo background
Example of white text with black outline on a photo background

Or stylise text (within brand guidelines) and/or use a reduced transparency colour block for the text to sit on.

Example of white text with colour block on a photo background
Example of white text with colour block on a photo background

Lastly, the image could be made black and white and use brightly coloured text to contrast against the detail. Make sure there is sufficient contrast when viewed in black and white.

Example of coloured text on a black and white photo background
Example of coloured text on a black and white photo background
Recognising links

We all use text as a form of communication and within Canvas, i.e., learning outcomes, tasks, etc. If text on your Canvas page is not a link to another page, avoid formatting text to be underlined. And don’t rely on colour alone. Underlined blue text on any internet platform typically denotes a clickable link. This can cause confusion if text is formatted and looks like links.

Whilst talking about links, use descriptive links (i.e., for more information, go to the QUB website [with the words ‘QUB website’ being the active link]) rather than ‘click here.’ This makes links more accessible to users of screen readers and it benefits all audience members.

Highlighting key concepts using alternatives to colour

Avoid using colour alone to highlight important messages within text and think about how you format text to draw attention to its importance.

Content designers may frequently use bold and italic on text to highlight and make key information stand out. Some users overuse this formatting and it loses the intended impact. If everything is highlighted, what is the key information?

When using MS Word, use the formatting styles to tag text as ‘header’, ‘sub header’, ‘body text’, etc. The same formatting principle should be used on Canvas. Highlight and use the pre-formatted styles for your headings. This is more accessible to screen reader users and it’s a one-click format.

Do consider the points above about the use of symbols and alerts if appropriate.

Provide speaker notes (MS PowerPoint)

In MS PowerPoint, if speaker notes are used and PowerPoints are shared with students, speaker notes are available to students. This adds to the richness of content available and it is an advantage for all audience members.

MS PowerPoint - speaker notes
MS PowerPoint – speaker notes
Color combinations

We can’t always control the colour of the real-world in photos. However, we do have control over colour choices when designing content. The following color combinations can be problematic for people living with Protanopia and should be avoided when possible:

  • green/blue
  • green/grey
  • green/black
  • green/red
  • green/brown
  • blue/purple
  • blue/grey
  • light green/yellow
These are colour combos where people living with Protanopia have difficulty
These are colour combos where people living with Protanopia have difficulty

Following on from this, let’s have a look at Assistive Technologies (ATs) to help audience members with colour deficiency.

Assistive technologies available

What are Assistive Technologies (AT)? These are technologies specifically designed to assist people living with disability. AT covers a vast number of technologies for all sorts of assistance.

Whilst most computing devices currently have colour/contrast controls and other useful accessibility aids built in, we’ve provided a few from both Microsoft & Apple which can be used for audience members with colour blindness.

Microsoft

The Microsoft corporation has added many accessibility features to their software applications. These include:

  • Microsoft accessibility (overview)
  • Dark Mode (MS Teams)
  • OneNote (change page colour)
  • Display
  • Mouse Pointer
  • Text Cursor
  • Magnifier
  • Colour filters (Windows 10)
  • High contrast
  • Narrator

Windows 10 has a colour filters option built in which gives us an idea of how people with colour blindness see colour. Just type in ‘color filters’ into your Windows 10 search bar and the option will come up. Do explore this to see the results.

Apple

Apple has a number of accessibility features built in:

Dark Mode

Dark Mode transforms every element on your screen with a dark colour scheme to make reading easier. Toolbars and menus recede into the background as your content takes centre stage. Light text against darker backdrops in apps like Mail, Safari and Calendar makes text easier to read in low light.

apple.com
Display

Change your display to work the way you do. Choose from a range of colour filters to support your colour blindness or turn on Invert Colours to instantly change the values and contrast in iOS, iPadOS and macOS. Increase cursor size in macOS so it’s easier to find and use. Select from common presets like button shapes in iOS, transparency levels in watchOS and more. And when you’re all set, enable On/Off labels on your iPhone or Apple Watch so you know what’s on and what’s not.

apple.com

Why not have a look around the accessibility features Apple offers for people living with vision impairment?

Mobile Apps

Other downloadable apps for colour blind users include:

Browser plug-ins

As content designers, you can use some of the items below to help you create content with colour considered.

Interestingly, Google launched a new tool in Chrome (version 82 onwards) to simulate colour blindness. Web developers can launch Chrome and under the browser’s developer tools, choose the section titled emulate vision deficiencies. This offers a drop-down menu of vision limitations.

Online tools

There are a number of online tools and simulators which can help you check your use of colour when designing content. These include:

Resources

Just to give some assistance regards improving digital accessibility when designing content, we’d like to re-share some blog posts to improve accessibility:

Summary

Whilst there are many services, assistive technologies and Apps available to assist people living with colour blindness, we cannot list everything here and you may already be using different Apps and technologies. There are some great resources which you can access at AT Hive which are broken down into specific categories.

We hope you have enjoyed this blog post and it helps you become more aware of the needs of audience members when creating content and other technologies available as well.

Next week

In our next blog post, we will be looking at audience members living with dyslexia.

Remember, the DigiKnow blog posts are released at noon on a Monday.

Please do join us then to learn more and don’t forget to follow us on Twitter: @MDBSelearn.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *