Website Design: Inclusive Experiences Part 1 Visual: Colours and shapes

By Nick Heywood on the MSc Digital Marketing Management award

Why is accessibility important?

In order for the consumer to have an overall positive experience, it is strongly recommended that your project is designed to be inclusive. If the right accessibility isn’t in place, it could exclude consumers who may struggle or even be unable to interact with the project. The information that will be covered in this blog series can be applied to digital projects ranging from websites to computer games.

Visual Colours

Visual Colours

Visual: Colours and shapes

Visual aspects are crucial in any digital project, the appearance of your content is the first thing most consumers see, and influences how they will interact with it.

Using colour schemes/overlays

Using colour schemes/overlays

Colour-orientated design

This can be a tricky one, the use of colours can aid the experience for some consumers, it can however also hinder others if substitutional elements aren’t implemented.

Colour Schemes/overlays

Let’s start with how colour can aid experience, consumers with conditions such as Dyslexia and/or Irlen Syndrome can struggle to read against certain contrast and colours, due to struggles including the processing of spectral light, which influences how they process visual information; the use of coloured overlays to tint colours in front/behind the text can ease readability for them.

There is software that can help them with this online such as ColorVeil and nOverlay, although other platforms would benefit from access to alternative text colour schemes.

Alternate text colour schemes refer to the colour of the text, and the background behind it, especially in sections containing large bodies of text, or requiring quick reference during interaction. Providing options for the consumer to alter them provides an opportunity to not only tailor the experience to their needs, but also make it their own.

Colour schemes to take into consideration are shown in the image below

Text-Comparison on different colour backgrounds

Text-Comparison on different colour backgrounds

Taking font style and size into consideration can also aid this experience, Sans-Serif style fonts tend to be more comfortable to read, an extensive list of similar/other fonts to consider can be found at Dyslexic.com.

Communicating through shapes

If you rely on only colours to communicate functionality or change to consumers, it will be inaccessible to anyone who has a form of colour-blindness. Colour-blindness is a colour vision deficiency that affects how many colours a person can see in general; average colour vision is formed by three colour receptors in our retinas that process red, green, and blue, whereas a colourblind person will lack one or even all of them. The image below makes an accurate comparison of how people with various conditions perceive colours through their vision.

Colours perception for various conditions

Colours perception for various conditions

Photo Credit: Cole Seidner

This is why using various shapes can also help communicate your design, for example: how iOS Mail uses circles and Flag symbols to identify content you may wish to check, or how Twitter “fills” the Like/Love symbol to indicate you have Liked/Loved a post (see example below).

The role of colour and grey-scale options

The role of colour and grey-scale options

Viewing your content in a Greyscale colour filter is a good way of reviewing if colourblind individuals are able to visually process the information without the need of colour. Most modern smartphones have this feature under their Accessibility settings, up-to-date versions of Windows 10 (Windows+Ctrl+C) can also do this, Macs can do this via Universal Access in their System Preferences, it’s also feasible in Linux with plugins.

Following these steps in your project design will take it one step further to becoming an inclusive experience for consumers. Next time, we will be looking at how to communicate information that can’t always be seen or heard.

Nicholas Heywood

Twitter – LinkedIn – Portfolio

MSc Digital Marketing Management Student (Full Time)