How to manually test colour contrast in Figma
The vast majority of the time, people go on the internet to read things. Why would we make that difficult?
The most common accessibility issue on the web is poor colour contrast, and it affects a vast number of people.
When it comes to “shifting left”, there are plugins available for Figma that can help with testing colour contrast against WCAG colour contrast ratios, but these do come with their limitations. However, there is a really easy way that you can test your Figma designs for contrast issues — and other sight conditions — for FREE.
Why Colour Contrast matters
Like most facets of accessibility, Colour Contrast isn’t exclusively an issue for those with disabilities. Sure, someone with poor vision will likely struggle to view your website if you are using white text on a light grey background, but the likelihood is so will everyone else.
There are several situational impairments that can also make low contrast content more of an issue for a user:
- Glare on a device screen, or wearing sunglasses — particularly polarising ones- can make low contrast content really hard to view
- Looking at something from a distance, such as a device at arms length
- Not having your glasses/corrective lenses to hand
- Viewing a dimly-lit screen in a low light environment, or even if your device has a low battery
If you’d like to read more on the importance of colour contrast, I’d recommend reading Colour Contrast — why does it matter? on gov.uk.
Colour Contrast tools
There are some great tools out there to test colour contrast. Historically, These predominantly fall into two categories:
- Websites to measure the contrast of two colours entered by the user (my favourite being colourcontrast.cc), and
- Browser plugins that assess the accessibility of a webpage, including colour contrast (like WAVE).
These tools are all based on Colour Contrast Ratios — an equation that identifies the contrast between two colours. There are minimum values set within the Web Content Accessibility Guidelines for different use cases (text, large text, interactive content, etc).
Figma Plugins
As product design has evolved into tools like Figma, plugins have appeared that behave in a similar way to the web-based checkers, and in most cases these are great.
However, these tools do have their limitations. Such as:
- Results of colour contrast against gradients or semi-transparent overlays can be questionable.
- They tend to only measure text again background — it doesn’t include other aspects of colour contrast, such as things like buttons and interactive elements.
- In order to correctly function, they have a dependency on how you structure your layers with Figma (i think)
Example:
I’m going to use a generic Figma template from the Community for the purposes of this illustration.
You can see, in the screenshot below, that this particular accessibility checker is flagging three things with the screen:
With all three issues, the tool has misinterpreted what the background colour is. It seems to think that:
- The white “10,000$” text on the VISA card is on a white background, rather than a royal blue background
- The light blue “Salary card” text is also on a white background, rather than the royal blue background, and
- The black “Translate” header is on a light blue background, rather than the white background.
Not a great start! Furthermore, the areas that look to be of insufficient colour contrast — such as the light blue text in the bottom right of the card, or the light grey text on the white background- have not been flagged at all:
Safe to say, these tools have their flaws.
The problems with automated tools
Like all aspects of accessibility testing, you shouldn’t rely on automated testing alone anyway. Why? Because they won’t pick up all the issues.
Anecdotally, automated accessibility testing will only ever find up to 30% of accessibility issues. For the remainder, you need to test with real people.
However, I appreciate that being able to test with people who have real sight issues isn’t always easy. There are things you can do that might help you identify issues that might impact those with certain sight impairments early — and all you need is Chrome.
Chrome Vision Deficiencies Emulator
There’s a little-known feature in Chrome (and Edge) that can be really helpful in understanding what your design might look like to people with a variety of different visual impairments.
These tools sit under the Rendering Tab within Developer tools:
If you scroll to the very bottom of this tab, you’ll find an option called “Emulate vision deficiencies”:
Within the dropdown, you’ll find a host of different visual deficiencies you can now apply, including reduced contrast:
The wonderful news is that these emulations work perfectly when you preview your Figma prototype in Chrome!
Examples
I’m going to use the same template from the Figma Community, and preview the design (using the play arrow in the top right corner) to see it in a browser.
Original:
Blurred vision:
We can still make out some of the text, but the smaller examples with reduced colour contrast — such as the placeholder text in the input field- is quite challenging to read.
Reduced contrast
In this example, the smaller text becomes completely invisible.
With both of these examples, we can see how much of an impact reduced colour contrast could have on some users. However, we must remember that these emulators should only be used to trigger thoughts and considerations in the design process, rather than considered actual user testing. You might even want to use these as examples to stakeholders/product owners to help prioritise user testing with visual impairments.
Hopefully this will help you weed out some of your colour contrast issues earlier, saving valuable time in your design crits to focus on other things.
