Practical accessibility - part 1: using a colour contrast checker
🔊Listen to an audio version of this post on SoundCloud
Accessibility and inclusive design are a focus area of mine. I think it’s really important that we design products and services which can be used by everyone. Accessibility isn’t a nice to have anymore. Now that everything is online, it’s essential to allow people to access everyday digital services.
There’s some fantastic material on these subjects from books and blogs to videos and Twitter feeds which I’m keen to explore more and write about. I really like Microsoft’s Inclusive Personas which builds awareness of people’s needs and motivations for permanent, temporary and situational.
In this blog series, I’m going to share a few practical things I’ve learned that have helped me create more accessible and inclusive products.
Practical Tip #1 - use a colour contrast checker for readability
Colour contrast is the difference in light between the background and foreground colour.
In web accessibility, how well one colour stands out from another colour determines whether or not most people will be able to read the information.
High colour contrast is readable:
Hello, World! (white text on black background)
Low colour contrast is not:
Hello, World! (yellow text on a grey background)
The problem of low colour contrast is not limited to designing websites or apps, it can be found in presentations, emails, images, ads, posters and more. Once you know to look for this, you will see it everywhere!
Why colour contrast is important
Low colour contrast can be hard to read for everyone but can even more challenging for:
People with vision impairments
People with colour vision deficiency (around 1 in 12* men and 1 in 200* women have some degree of colour vision deficiency)
Reading in bright conditions
There’s an interesting test for colour vision deficiency.
Colour vision deficiency test
If you can see the number 74 in the image, you may have normal colour vision (but this is only one test), and if you can see 21, you may have a red-green colour vision deficiency.
source: GDS blog
How to fix low colour contrast and choose accessible colours
WCAG 2.1 accessibility guidelines are the gold standard for web and app design. Section 1.4.3 states the minimum contrast ratio should be 4.5 : 1, which is the the colour difference between the foreground and background. There’s a few tools I’ve found helpful for checking this:
WebAim Colour Contrast Checker
Enter the background and foreground colours and it computes the ratio and indicates if it passes or fails WCAG guidelines.
Colour contrast checker for black/white and yellow/grey colours
Colour Contrast Checker Chrome Extension
Bring up an overlay to check colour contrast
Output of yellow/black colour contrast that meets WCAG guidelines
Stark design tool plugin
Check colour contrast direct in your design tool.
Available for: Sketch, Figma, Adobe XD, Chrome
Showing Stark plugin in Figma design tool
It’s easy to check colour contrast
These tools make it really simple to check the colour contrast of the things you’re creating and everyone can use them, not just designers. With this, colours you use will be more inclusive and accessible.