The importance of colour friendly design
If new stops and stations need to be accessible for all, why shouldn’t digital services?
In the UK, 1 in 5 people have a disability. This could be visual, hearing, motor (sensation, movement, or coordination) or cognitive (memory and thinking).
This means at least 20% of users may be struggling to access and use the services you provide. If your service doesn’t meet all the needs of your users, they will find it difficult to use and won’t get the information they need.
This will encourage users to search around and find competitors who meet their needs.
As a local authority, our digital services are required to meet the government accessibility requirements. These are:
- To meet WCAG 2.1 AA accessibility criteria for websites and apps
- For websites and apps to work with most assistive technologies (Screen magnifiers, screen readers, speech recognition input etc.)
- Including people with disabilities in user research
- To own an accessibility statement that outlines the accessibility of our service
We are doing more than just abiding by the law
For the new West Midlands Network website, currently in alpha and beta, we are integrating the inclusive design method across the design and development phase of our projects. At the start of each project, we put people in the centre.
We aim for our digital services to be used by the widest range of people to minimise user exclusion. To do this, we step away from the typical user bias and look to represent unique, diverse individuals who have different abilities. All users grow and adapt differently and we want our services to reflect that.
We want to make our transport services accessible for all
One outcome of inclusive design is accessibility. We want everyone to use our services without difficulty, so users of all types can find what they need when they want it.
Accessibility plays a major part in how we design our services. We test for accessibility issues early to make sure our service is usable when it goes live.
Designing for accessibility isn’t restricted to users with physical disabilities, it affects nearly everyone at some point in their lives. Accessibility can be split into permanent, temporary and situational. We make sure we include all these different types in the usability of a service.
Colour vision deficiency and accessibility go hand in hand. It affects around 1 in 12 men and 1 in 200 women. Most people with colour vision deficiency have difficulty distinguishing between shades of red, yellow and green. This is known as “red-green” colour vision deficiency.
Our goal is for users with colour vision deficiency to use our services and find the information they need without difficulty.
We achieve this by ensuring that our services meet colour accessibility guidelines by testing early in the design process. Doing it early within the design process means we can fix any usability issues before the service goes live and widen the reach of our service without compromising on features or content.
How are we embedding colour friendly design in our services?
We make sure the styles, components and patterns in our design system conform to colour contrast requirements.
By designing a colour friendly design system, we can guarantee that the services which use these building blocks meet accessibility requirements. This also gives us confidence that the web pages which content editors create are using the styles, components and patterns which have been colour blind tested.
One example of colour friendly design in the design system is the Travel updates widget. We use status indicators to visually show the type of disruption to a transport mode through colour and icons. We also specify the severity of the disruption using text. We don’t rely on colour alone to inform users that a transport mode is disrupted.
We also integrated colour friendly design in the development of our new interactive rail zone map service, where users can find their rail zones on a map or from a list.
We made sure that all the colours in the map had a high enough contrast so users with a low colour deficiency can differentiate each zone. This included the orange train lines, the grey and purple zone sections and the highlighting of the select train station.
Colour accessibility is quick to check and can have a huge, positive impact on the usability of your services. By taking these steps, we can now provide consistent, usable services for every user.
What tools can help you design for users with colour deficiency?
There are many tools on the web that help you check the colour contrast of foreground and background colours. Here are some which we recommend.
To check if the colours of fonts, icons and buttons meet colour contrast requirements, you can use the Stark plugin to check this directly in Figma, Sketch or Adobe XD. If you prefer to check manually, we suggest the quick and easy WebAIM contrast checker.
If you want to visualise colours perceived by users with various types of colour blindness, Colblindor will help you do that with specific images. We also recommend the desktop app Colour Oracle, which changes the colours of your entire screen in real-time to mimic different types of colour blindness. This gives you a realistic view of what users with specific colour blindness will see when they visit your service.
It doesn’t take much to identify and solve colour accessibility issues. It’s better to test for accessibility early to mitigate any issues later in the design and development phases.
This small effort can make a huge impact on the users of your service by making it more inclusive.
This article was published as part of #ServicesWeek 2021, a cross-organisational UK public sector event series.
You can also read more of blogs from our team on the WMCA Digital and Data Medium publication.
