Skip to content

Inclusive Design: Colours and Shapes | Bitesize UX

Why is accessibility important?

Inclusive design helps your project to consider accessibility requirements and contribute to creating a positive experience for consumers. Without appropriate accessibility, consumers may struggle or even be unable to interact with the project and feel excluded. You can apply the information in this blog to different ux projects, from websites to video games. Visuals of your content are crucial, they’re the first thing most people process, and influences how they interact with it.

Colour-Oriented Design

Communicating through colours requires balance. They can improve the experience for some consumers, however, they can also hinder others if substitutional elements aren’t implemented.

Colour Schemes/Overlays

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. Using coloured overlays can also help people with other processing impairments such as autistic spectrum disorder. 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/background colour schemes. Particularly in contrast between the background colour and light/dark text as you can see in the example below:

Colour Comparison for Text with Different Background Colours

Providing alternative options for the consumer allows opportunity to tailor their experience to their needs, and make it their own. 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

Relying on colours to communicate functionality/change to consumers can 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. Three colour receptors in our retinas process red, green, and blue to construct average colour vision. 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.

Colour Comparison of Normal Vision to Various Types of Colourblind Conditions

Photo Credit: Cole Seidner

Using various shapes can help communicate your design, for example: iOS Mail uses circles and Flag symbols to identify content. Twitter on the other hand “fills” the Like/Love symbol to indicate Liked/Loved content.

Image description: A comparison of colour and greyscale images of iOS Mail and Twitter interaction screenshots to demonstrate an example of what has just been discussed. end of image description.

Viewing your content in Greyscale is ideal for reviewing if colourblind individuals can visually process the required information without 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. We also have posts covering accessible social media and accessibility in retail.

Skip to content