As designers we are constantly pursuing to resolve problems, creating effective solutions that have an impact on as many individuals as possible. However, in most graphic design practices the exclusion of crucial accessible guidelines is evident, preventing people with disabilities to truly be included. Recently I was using a map from my university to find out where I could park. Because my university is incredibly big, the map had a legend with a huge variety of colours to define the many different designated areas of parking. To be honest it was quite an overwhelming experience for me because the map was clustered with lines and writings and colours that was confusing to read and interpret. Then it clicked with me - if it is hard for me, how would it be if I had a disability - for example, colourblindness? What if all of these colours looked the same? The answer is simple - I would be unable to use the map.
This sparked an interest in me to research a little bit more on accessibility in design, and how, in specific, colours can shape me as a designer to create and design things that are accessible for all. I decided to rethink the parking map of my university, but first I explored what's out there - examples of other maps around the city I live in - Canberra (what I could implement and what I should avoid) and some tools that could help my design become more accessible. Would love to share this experience with you and open a conversation on how we, in our own practices, become more aware of making design accessible for all.
Firstly, what is colourblindness? A number of about 8.5% of people in Australia suffer from a visual colour deficiency. People with this disability see colours differently than others and have difficulty to identify and classify differences in the red, blue and green spectrum, depending on what type of colour blindness they have. The most common colourblindness is called Deuteranopia (red-green) which is what we will focus on this research. I went around the city and in different websites to gather maps of Canberra to analyse which elements work well and which ones don't in light of colourblindness. Each map below has two versions - one being "Normal Colour View" and the other being a simulation of "Deuteranopia Colour View."
Analysing closely, each map has things that worked and didn't after being put through a Deuteranopia Colour filter. The main take-outs are:
1. Use symbols to convey meaning - don't just rely on colours. A combination of both can be powerful - your design will still be accessible without compromising the nice colours of your design.
2. Choose colours wisely - using shades of the same colour can be a great tool - especially if you are layering them over so they are easily distinguishable. Colours at opposite spectrums, especially red and green will look the same for someone with Deuteranopia colourblindness - and crucial elements of your design can "disappear" for them.
3. Choose the right colour for your background - or the colour that will be the protagonist of your design. Some colours can be too overwhelming for someone with deuteranopia colourblindness (for example bright green). Experiment with colours or even shades that are more subtle and won't take away from your final design.
4. Don't be afraid to use black and white in small details of your design - they can be recognised by everyone.
5. Always use colour blind filter modes to analyse your work as you progress in colour picking. Some colours will appear very close to others which can create confusion. Consider changing the colour completely, or if you can't compromise that much, you can experiment with darker/lighter shades of the same colour.
Ok, now back to rethinking of my university's map. The biggest challenge with this map is that the legend is extensive and there are a lot of colours in it. It's easy to create an accessible design when it doesn't require lots of colours - there only so much colour shade you can choose before it becomes even confusing for those who can see the full-colour spectrum. Someone with Deuteranopia colourblindness can only see the colour and the shades of yellow and blue. The map requires 15 different legends with different colours for each - a big challenge for accessibility. The map had to be redone without changing its look completely. It was all traced by hand, layer by layer. street by street, building by building. Over 40 hours were put into it but believe it - it was worth it. Now let me share some results!
The solution was to create specific shapes for each colour, keeping the colour range but have a shape to assimilate with the colour. Because the shapes and colours can be similar, it was also important that the shapes that looked similar had colours that were very distinguishable from each other. The result for a new legend was this:
On top of that, it was important to think about the colours on the surroundings - the streets, the background, the text, the lake and the buildings. It was important to keep the colours from these elements the least distracting - without having to use the strokes on every building like the original map but (which made things even more confusing). Eliminating some of the text and keeping what is important - nonetheless, we want a parking map and nothing else - the colours were chosen so that they wouldn't look like any of the colours from the legend - with lighter shades to eliminate distraction from the other colours that matter.
The final result is a map that is clean and in great resolution - although the shapes had to be small because of the numbers of details that the map has, the user is able to zoom in and see the colours and shapes, as well as read the names with a more legible font - Gotham. Every colour has a shape attached to it which makes it accessible for more people to use the map without having to rely so much on colour alone. You can download the full version at the end of this blog :)
Accessibility does not end with just colourblindness. There are a lot to uncover but no panic! There are some great tools out there that can help and guide you through all things to consider before completing your design quest. You can find guidelines on WCAG (Web Content Accessibility Guidelines) and AGIMO (Australian Government Information Management Office) accessibility standards. There are also tools like CCA (Colour Contrast Analyser) and websites like Toptal who analysis colour contrast and palette to create best colour combinations for people with visual impairments. Also, most of Adobe Cloud applications have colour blindness view proof setup which you can easily change while you are doing your design - this is how to do it on illustrator but you can do it with photoshop too:
Designing for accessibility is not easy. There is a lot to consider when it comes to creating the perfect design, even more so to make it accessible for everyone - but it is necessary. With a bit of tweaking and design thinking your design can be effective and accessible, without having to compromise its 'look.' I hope this small research and exploration of mine has inspired you to pursue a more accessible design in your own practice like it has changed mine.
Download the map PDF here
"Access-ablity." RGD Ontario. 2010. Accessed March 14, 2019. https://www.rgd.ca/database/files/library/RGD_AccessAbility_Handbook.pdf.
“CCA”.GitHub Accessed March 14, 2019. https://github.com/ThePacielloGroup/CCAe/releases/tag/v1.0.0.
"Choosing a Format." Accessible Graphics. August 8, 2018. Accessed March 15, 2019. http://accessiblegraphics.org/formats/choosing/.
"Coblis - Color Blindness Simulator." Colblindor. Accessed March 15, 2019. https://www.color-blindness.com/coblis-color-blindness-simulator/.
"Colorblind Web Page Filter." Toptal Color Blind Filter. Accessed March 15, 2019. https://www.toptal.com/designers/colorfilter.
Cornish, Katie, Joy Goodman-Deane, Kai Ruggeri, and P. John Clarkson. “Visual Accessibility in Graphic Design: A Client–designer Communication Failure.” Design Studies40 (September 1, 2015): 176–95. https://doi.org/10.1016/j.destud.2015.07.003.
Department of Finance. "Whole of Government Technology and Procurement." Department of Finance. March 15, 2019. Accessed March 15, 2019. https://www.finance.gov.au/agict/.
Feinstein, Laura. "How Can We Make Design Better for the Color-Blind?" Adobe 99U. February 27, 2019. Accessed March 15, 2019. https://99u.adobe.com/articles/59737/how-can-we-make-design-better-for-the-color-blind.
Hamilton, Ruth. "How Accessible Are Your Designs?" Creative Bloq. December 23, 2018. Accessed March 14, 2019. https://www.creativebloq.com/news/how-accessible-are-your-designs.
"How to Create Accessible Content." Media Access Australia. Accessed March 15, 2019. https://www.mediaaccess.org.au/digitalaccessibilityservices/services/education-and-training/accessible-content-creation/.
Lambert, Steven. "Designing For Accessibility And Inclusion." Smashing Magazine. April 09, 2018. Accessed March 15, 2019. https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/.
Nelson, Nick. "Colour and Contrast - the 2 Essentials of Accessible Design." Digital Transformation Agency. February 18, 2019. Accessed March 15, 2019. https://www.dta.gov.au/blogs/colour-and-contrast-2-essentials-accessible-design.
Smith, Michael. "Colour Blindness." Vision Eye Institute. February 26, 2018. Accessed March 15, 2019. https://visioneyeinstitute.com.au/eyematters/colour-blindness/.
Stanley, Pablo. "Designing for Accessibility Is Not That Hard." UX Collective. June 27, 2018. Accessed March 14, 2019. https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94.
Shankar, Neil, and Neil Shankar. "Designing for Accessibility, Step 1: Color Contrast." UX Collective. July 12, 2017. Accessed March 15, 2019. https://uxdesign.cc/the-easiest-part-about-designing-accessible-websites-76cd6b9a7ae4.
"Print Materials." VisAbility. Accessed March 15, 2019. https://www.visability.com.au/empathy-library/providing-access/1460-2/.
W3C. "Web Content Accessibility Guidelines (WCAG) 2.0." W3C Recommendation. December 11, 2008. Accessed March 15, 2019. https://www.w3.org/TR/WCAG20/.