Colour and the 3 key ingredients that power Accessible design
This follows on from the Australian Government’s Digital Transformation Authority’s (DTA) previous post on “Accessibility-going-beyond-the-guidelines”
At the DTA we design to a standard called the Digital Service Standard. It outlines a criteria of 13 points that ensures digital teams build government services that are simple, clear and fast. Point 9 titled Make it accessible ensures the service is accessible to all users regardless of their ability and environment.
Designing for Accessibility is more than meets the eye, it requires more effort than you might think, It’s the sum of the parts.
As a continuation from our previous article on Content Accessibility, this article details the visual design accessibility that includes:
1. Colours
2. Contrast
3. Icons
4. Interaction and affordance
There are 525k people over 65 that access government services in Australia. Half of whom have a low-vision condition. It’s also Australia’s fastest growing population segment.
Not designing for these people shows a huge lack of empathy.
I’ve been designing for the DTA Government Performance Dashboard. The process has made me think about how to design for everyone. Not only design for accessibility but how it could be a powerful way to drive change.
Another group is the over 40s, who need reading glasses or bifocals to see small objects or text. A condition caused by the natural ageing process, called Presbyopia.
We are always striving to define simple, clear and fast services. Making content accessible in a powerful way in a powerful way that allows people to absorb the information and take action.
1. Colours
A key part of our new design update has been making colours work well in charts. We need to make this not only accessible for people with colour blindness conditions. Affecting up to 9% of the population but also contrast and sizing affecting many more.
Chart colours can look totally different for people with colour conditions
The chart on the left is the correct one, the other 2 show the same colours but appear quite differently depending on their colour condition.
You also need to stay away from anything red that would infer a negative connotation when displaying in charts. This restricts your options.
Alternating colours help provide contrast when data amounts are small. Upon careful testing using the Sketch Plugin Stark, I came up with the following palette.
Applying patterns
If you need a large colour palette then you will find it harder to overcome the colour conditions and match contrast. You will need to apply a pattern filter to overlay on these colours to further enhance accessibility.
Looking at the same chart through the colour condition of Protanpia (red green colour blindness). The colours on the left look exactly the same, now resolved by the applied pattern filter.
We used High Charts with their Accessibility module.
2. Contrast
It’s one thing to come up with a good colour palette that helps people with the 7 known colour conditions but you also need to take into account contrast.
The World Wide Web Consortium (W3C) is an international community that develops open standards, they provide guidelines for accessibility. They define the Contrast (Minimum) as:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
3.Icons
Diversity and inclusivity are described in our Digital Service Standard to help us ensure we’re designing effective government services.
Iconography helps communicate, especially when English is not your first language. Australia is one of the most diverse countries in the world.
Statistics* show that around:
- 27% of us were born outside Australia
- 3.0% of us identify as Aboriginal or Torres Strait Islander**
- 19% of us speak another language at home
Our post on considering the diversity of our users Andrew Arch describes this in more detail.
Our icon approach:
Use clear and simple icons to reduce cognitive load. Be recognisable across languages and cultures.
A more modern approach can be the use of line icons. These are less visually heavy than having solid filled in icons which help keep the page visually clean and accessible on a visual level while still communicating the meaning of the icon. You can find many options at The Noun Project.
Summary
By ensuring each works well is like a rising tide that lifts all boats and can act as powerful force for change. Change for the millions of people accessing government services. Shaping their perception that this is their government. A tangible way to show people you care, showing empathy where design puts the user in the centre.
Helpful tips
Colour forms a key part of Google’s Material Design approach
Be bold, graphic, intentional
These elements do far more than please the eye. They create hierarchy, meaning, and focus.
Deliberate colour choices
Are a set of colours that work well with each other for not just contrast and accessibility but also can set the tone of your content and match your brand.
Intentional white space
Creates a bold and graphic interface that immerse the user in the experience.
Colour use
The key component here because it’s Bold, Graphic and Intentional.
Think about the context of your app
What kind of activity does your app promote?
What is the personality of your app?
Try and be more then one-dimensional, make it interesting and reflect this in your colour choices.
Study the meaning behind colours
Each colour can have both a positive and negative connotation so you need to know what these are and match them to your app.
Think about visual aesthetics and colour but also aesthetics as a whole. This drives meaning and connection as we are designing for people first..
Colour design tools
Use these latest top rated Product hunt colour design tools to get you started.
getstark.co
Use Stark to work with Sketch. You can easily check colour contrast and the 7 colour conditions right from the plugin tool.
