Using accessible colour in design
A student volunteer has designed some signs for the Salty Creek Community Festival, but the colours she’s chosen aren’t appropriate. Check out Sammie and Hayden’s feedback, and the tips they give the volunteer to help with her future designs…
The Salty Creek Community Festival is just around the corner, and it’s time to start thinking about the signage.
Priya is a local year 11 student who is thinking about studying graphic design or communication design at uni in the future. Priya has asked the festival organisers, Hayden and Sammie, if she can help with the signage by designing some of the wayfinding signs. They’re happy to let her help out to get some practical experience in the design field.
When Priya shows Hayden and Sammie her initial design ideas, they notice some problems with the colours she’s used.
Look at Priya’s first design draft below. What do you think the problems might be with her colour choices?
Read Sammie’s comments to Priya about her colour choices.
“Using colour in your sign design is a fantastic idea! It can really make your signs pop and grab people’s attention. But you’ve got to think about too, so that as many people as possible can read your sign.
Some colour combos, like red and green or white and yellow, might not work so well for everyone. It can be hard for folks with colour blindness or low vision to see the difference between colours. That’s why it’s really important to use colours that have high contrast and are easy to differentiate. I have pretty good eyesight, and even I struggled to read the white text on a yellow background.
Low colour contrast is when two colours are similar in lightness or darkness. High colour contrast is when two colours with a difference in lightness or darkness are put together, which can make things stand out more. Have a look at these images – see how the centre lines on the road, and the mountains in the distance, stand out more in the picture with high contrast?”
Use the image slider to compare the examples of low and high colour contrast.
“So, you need to be aware of contrast, but also the specific colours you put together. Did you know that red-green colour blindness is the most common type? It’s called deuteranomaly. When someone with this type of colour blindness looks at your Market and Gallery sign, they might see both the background and the text as the same colour – a shade of yellow or brown – making it very hard to read.
Luckily, there are tools called ‘colour contrast checkers’ that you can find online. They can help you figure out which colours and contrast levels pass accessibility standards, so you don’t have to do any guesswork with it.
By the way, those icons you added to your signs are a great way to make things more inclusive. Definitely keep them! Visual representations help people understand what your signs are about without having to be able to read the text. Just don’t forget to make sure that the colours you use for those are accessible too!”
Now read the advice Hayden gives Priya.
“Sammie’s made some great points. I’ll just add a couple of things from the perspective of someone studying communication design, since I know you’re interested in that area, Priya. Learning a bit more about accessible colour, and colour in general, will give you a head start.
Communication design is all about making visual content that gets a message across to the target audience. Some people probably think that colour in design tasks is just about making things look attractive, but it’s so much more than that. When it comes to making signs, posters, instructional sheets, online presentations, email templates, or social media graphics, choosing the right colours is crucial! We have to think about how colour is seen and interpreted, the feelings it gives people, how it conveys a message, and where it directs attention.
So, it’s really important to think about how our content will be perceived by all kinds of people and choose colours that are easy to read and understand. We always want to make sure everyone can get the message we’re trying to convey. At the end of the day, that’s what good communication design is all about!”
After taking the organisers’ feedback on board, Priya is using an online colour checker tool to find the right colours and contrast for the signs. The tool uses the (WCAG).
Have a look at some of the colours Priya tries and whether they pass the accessibility guidelines. Select each card to turn it and see whether the text and background colours are accessible.
Now that you’ve seen the colours Priya has tested for her signs, use the interactive colour contrast checker below to choose your own colours for the festival signs. Do they pass WCAG AAA accessibility standards?
Priya decides to use white text on the dark green background and black text on the yellow.
Her new signs are much easier to read and will ensure attendees can find their way around the Salty Creek Community Festival grounds. Sammie and Hayden are thrilled with them, and Priya can’t wait to see them up on the festival weekend.
Use the slider to see the new version of the sign.
Priya has learnt a lot about colour and accessibility. Now she wants to know more about colour blindness and how it occurs, and other ways to make designs visually accessible. She’s even more interested in doing a course in Design or Communication Design when she finishes high school now, and she can see how important colour is.
Having an awareness of colour blindness and accessibility is cross-disciplinary knowledge that is useful in a range of subjects and professions, from visual content in communication design and brand development in marketing to designing emergency alarm systems, or user interfaces in engineering.
- Hayden knows a lot about colour in communication design. When it comes to stage lighting, however, he’s just a beginner. Discover what Hayden learns about working with coloured lights while he’s setting up the stage for a rehearsal. (8 to 10 minutes)
- Learn more about the different types of colour blindness and explore links to videos and online tests by visiting the Colour blindness tutorial. (15 to 20 minutes)
- Check out the Accessible colour tutorial to read more about the importance of colour accessibility in design and find links to useful resources and tools. (10 to 20 minutes)
Accessibility refers to the design of products, services, and spaces that are usable by as many people as possible, accounting for a diverse range of individuals, including people with disabilities and temporary limitations, the elderly, pregnant people, neurodivergent people, and people with literacy difficulties. Accessibility benefits everyone, as it aims to remove barriers and provide equal access to information, technology, and physical spaces for all individuals.
The Web Content Accessibility Guidelines (WCAG) are technical standards that help designers create content that is accessible and can be easily used by everyone. WCAG 2.1 has three levels of accessibility compliance: A, AA, and AAA.
Level A compliance means that the content meets the most basic accessibility requirements, while Level AA meets more advanced criteria and is often the standard requirement in design. Level AAA is the highest, and preferable, level of accessibility compliance.
While the WCAG guidelines were originally developed for digital content, the principles and techniques can also be applied to non-digital products and services, such as physical spaces, customer service processes, and product design.