Colour contrast in UX
What does it mean to design for accessibility?
Accessibility has been a hot topic for what feels like forever, and honestly, I couldn’t be happier. Back in 2016 was the first time I worked on a project where accessibility was a thought, and even then, we answered a grand total of seven questions and made a plan based on the answers to them. Since then, I personally have grown to learn more and more about accessibility in design, and how to incorporate it even if accessibility isn’t the number one concern of the project. For this article, we’re going to focus on colour contrast — both how to plan for an accessible palette and how to meet the standards.
What makes colour contrast a part of UX?
The user’s experience is shaped by what they see on the screen, and how they’re able to go about what they need to, to get to what they want. If a user is visiting a site and can’t see a link or read a button because the colours are too light, then they aren’t going to be able to complete the task they set out to do. If a user with any form of colour blindness or visual impairment visits your site, they may not be able to see the elements properly, if at all. In all of the above scenarios, the user may experience frustration, or an inability to do what they need to which causes them to leave the site.
This also goes past what we typically define as a visual disability: this also means that users with poor vision who require a higher zoom level or who in general can’t see as well may also have frustrating experiences. In this case, I’m referring to an older audience, but that doesn’t mean they’re the only users who experience poor vision. Someone who is browsing your site with their glasses off and a higher prescription would still fall into this category.
Even users with good vision, colour or otherwise, can still struggle to view your site if you don’t take colour contrast into account. If you’ve ever struggled to read text on a site and you don’t have any form of visual disability, then chances are a user with one or more would have an even more frustrating experience. This goes back to why testing with different users is important — each user is unique, and they may notice different things or have different experiences that give you insight into improvements to be made. If you’re not able to test with actual users in the initial phases of design, using tools like Stark, color.review or abc.useallfive.com can all help to test how accessible your colours are, giving you the opportunity to make tweaks.
How to plan your palettes
One of the first things I do when I get a design prompt is to figure out if we have access to brand colours. If we do, then one of my favourite tools is this accessible colour palette tool by Use All Five. You can add in a bunch of colours from your brand and see how accessible they are with each other. I like to include a white and a black in this palette so that I can better understand how I can design my interactive elements.
If we don’t have access to brand colours, my first step is to go to their current site and start pulling colours. After I've pulled them all, I’ll go back to the palette tool by Use All Five and go through the same steps, but usually, I’ll throw in some additional colours if I find any missing or lacking. I like to brief the client on whether we’ll be making these changes, and provide them with an example of what this would look like and why it’s important. I’ve yet to have a client come back and tell me that these changes can’t be made, especially when we’ve been able to accurately describe the importance of accessibility.
If I have none of the above to work with, then I like to go to coolors.co and begin generating a palette. I find this tool nice because, with recent updates, I can now test to see the colours through the lens of different colour blindness variations. I love this feature because now if I have two really similar colours that are going to be nearby each other but serve two wildly different functions and I need the colour to help communicate their differences, then I can choose different colours to use.
But wait…what exactly is colour contrast?
In the simplest terms, colour contrast refers to the calculated difference in luminance between two colours, indicating how visually similar they are. A ratio is typically generated when it comes to colour contrast, something you may have seen, like 4.5:1 or 7:1. For those familiar with WCAG 2.0 or WCAG 2.1, you’ll know that depending on different situations, you need to meet a minimum contrast ratio for text to meet accessibility standards.
For AA standards, regular text and images of text must meet a minimum contrast ratio of 4.5:1. For text sized 18pt, text sized 14pt and bolded, or iconography, text must meet a minimum contrast ratio of 3:1. AAA standards increase these two ratios to 7:1 and 4.5:1 respectively.
It is important to note that colour contrast ratios do not round. This means that if your contrast ratio is 4.49:1, this does not pass AA standards. As designers, we walk a fine line of seeing the contrast, testing it, and seeing that it does pass other visual tests, but I urge us all to not fall victim to these assumptions. It is a better habit to always try to choose colours that meet accessibility standards, then to have to go back and make modifications later.
In Ontario, with AODA, all websites must meet AA accessibility standards by January 1, 2021. At this point, that’s less than 3 months away, and a lot of websites still aren’t likely meeting these requirements. AODA and WCAG both extend past just colour contrast — they also help to ensure compliance with a site’s hierarchy and structure, code compliance in terms of screen reader compatibility, and even captions for videos.
It’s never too late to get started, so let’s work together to make more of the web accessible.
The more we as designers continue to educate ourselves, the more accessible websites we can design for the future.
Disclaimer: I am not an expert in the field of UI or UX. I am someone who has been working in the field for 5+ years, who started when UI and UX were still questionable fields, even if it had been around long enough that some people knew what it was. I’ve seen it grow. I’ve found more and more resources over time. I’ve second-guessed every design decision. I’ve had internal stakeholders question my designs, only to go back to the original design after more vigorous feedback rounds. I’ve had designs that shifted from something I enjoyed, to something the client was happy with.
There are so many ups, downs, and confusion in this field, but every time I find new articles, I feel just that little bit more confident in the decisions that I’m making. I hope that this article finds you well, and you’re able to take it and the information it provides with you into your career and also feel just that little bit more confident in your designs and decisions.
