Colour and contrast — The 2 essential ingredients of accessible design

A recent article I did for the Digital Transformation Agency where I work as a Designer.

Our custom accessible colour palette incorporating Google Material Design

At the DTA we design to 13 criteria for simple, clear and fast government services. Criteria 9 is all about making things easier for users, regardless of their circumstances.

While developing our most recent performance dashboard (for Australia’s largest cities), we learnt quite a bit about accessibility in colour and contrast, some of which I’ve shared below.

A major group of people who use our dashboard are older Australians.

With more than 1 in 7 people aged 65 and over, they are a growing segment of Australia’s population and expected to double in the next 50 years. Half of them are also thought to have low-vision and it’s an issue not limited to their age group. Many people over 40 years old can’t read small text without glasses or bifocals. That’s a natural condition called presbyopia and just one of 7 known colour conditions.

So how did these conditions affect our choice of colour and contrast in the Smart Cities dashboard?

Colour

A key part of our work is using colour to help people understand information. Charts can look completely different to people with colour conditions. In Australia, 9% of us have some form of colour-blindness. Others have vision affected by colour contrast and sizing.

The chart as seen by someone with no colour condition.

The same chart as seen by people with different colour conditions.

To design the smart cities dashboard we needed 6 different colours — one for each category. But colours are very subjective and carry different meanings depending on your cultural and social background. Because of this, we avoided:

• Red — which is often used to signify danger or negativity.
• Bright green — which can have positive connotations.

Choosing 6 colours within these limitations was hard but we chose the palette based on Google material design colours and ended up with a more neutral bluey-green. We were also selective about which colours appeared next to each other to improve the contrast and make it easier to tell them apart.

We then tested the palette with some known colour conditions. There are different ways to do this kind of testing but we used Stark and this palette performed very well.

Applying patterns can help

It’s harder to find the right palette if you need to use lots of different colours in your design. One way to overcome this is to overlay patterns which make it easier again for the viewer to differentiate between categories.

Patterns applied to charts help with colour conditions like Protanopia.

Applying a pattern helps resolve colour issues by adding another layer of visual distinction. Especially useful for multicoloured charts.

To build these charts and apply these patterns, we used the accessibility module in High Charts.

Contrast

It’s one thing to come up with a good colour palette but we also needed to take contrast into account.

The people that wrote the book on this are the World Wide Web Consortium (W3C), an international community that develops standards for accessibility. It’s their web content accessibility guidelines (WCAG 2.0 AA) which features in our digital criteria for the Australian Government. They also define what minimum contrast should look like for the presentation of text, images of text, contrast ratios, large-scale text, user interface, decoration and logotypes.

It can be a challenge to meet the W3C’s standards and keep an interface working in harmony, looking good and pleasant for users. On the dashboard we found having a good colour range really helps.

Google material design allowed us to use an extensive colour range which is still manageable. We also needed more colours on the lower end of the range so we were able to create one. It was a big help to have subtle backgrounds to work with, lessening the blow of working with a high contrast accessibility effect.

3 of the Google material design palettes. Showing a good range but limited in the lighter tones i.e. only 100 and a 50.

The Smart City custom palette combined with Google Material Design.

We extended the palette to to include a 20, 40, 60, 80 and 90 shade. Also an additional on in the dark — 950. This also is needed to get a good contrast and range to display a chart with multiple legend items.

Implementing the colour system using a main colour for each section and various tones within that colour range.

By using a palette like this we can assure to the right levels of contrast to meet the needs of people with colour conditions and simplify the design by using subtitle tones to help communicate the essential data information.

The design awareness with both colour and contrast follows the 7 Principles of universal design. The purpose of the Principles to guide the design of environments, products and communications for all people. It directly applies to:

• Principle 1: Equitable Use
• Principle 2 Flexibility in Use
• Principle 3: Simple and Intuitive Use
• Principle 4: Perceptible Information.

Tips and tools to get you started

Accessible design is where each element works well together. It has the potential to change the way millions of people access and use government services and makes things easier for everyone regardless of their circumstances.

To finish off, here are some top tips for accessible visual design:

Be bold, graphic, intentional

Visuals do far more than just please the eye. They create hierarchy, clarity and meaning. It helps users focus on core tasks, features, and information when there is a clear viewing order to the visual elements on a screen.

Make deliberate colour choices

Choose a set of colours that work well with each other for contrast and accessibility. The right colours can also set the tone of your content and help communicate your message clearly.

Intentional white space

Create a bold interface that brings the user into the experience.

Use colour

Colour is the key component. It’s bold, graphic and intentional.

Think about the context

What is the context of your design? What kind of activity does your service promote? What is its purpose, when, where and how will it be accessed?

Study the meaning behind colours

Every colour has connotations. Know what these are and make them fit your purpose.

Think about the whole product

Individual visual elements and colours are great, but how do they work in the bigger picture of your product? Consider how visuals for the whole product affects the meaning and connection for your users.

Make use of the colour design tools available:

• getstark.co — use Stark to work with Sketch. Easily check colour contrast and view what you’re doing through different colour conditions.
• colordrop.io — a better way to visually see and search for colour palettes.
• lolcolors — well presented colour palettes.
• material.io — check contrast with multiple screens and colour palettes at the same time.
• coolors.co — a large single colour palette selection.

If you want to know more about accessible design, have a look at our blog about going beyond the guidelines.

If you have any questions about the cities dashboard, leave a message below or contact [email protected].