A beginner’s guide to black on white colour accessibility
Let me run you through a familiar situation.
You’ve gone and designed your lovely interface in Sketch, Figma, InVision Studio, Framer, etc etc there are too many tools, and you’re met with a big red X by the big bad lead designer or engineer when the design is run through accessibility testing.
Accessibility testing?
A part of the production process where you inspect your designs to check that your colour combinations have accessible contrast ratios.The easiest check is on your text-to-background colour contrast.
If you’re using colours for important information — for example, an active border state — this should also checked.
Okay, I’m aware that this isn’t a formal process in all teams, but we have a firm eye on our contrasts throughout the entire design process here and it at least provides us rationale for colour choices throughout our app.
And then…
As designers, we can take micro steps to ensure that our designs are meeting some minimal contrast guidelines.
Let’s take a look at how we use black text on white backgrounds; a popular combo.
Grey is the new grey
The white to black monochromatic colour palette is arguably the most used in design through our use of text, borders, and background colours; making this a grey place to start assessing your design choices.
When working with text that sits directly on the white to black scale (not a saturated version of a colour), we have a limited amount of options for acccessibility.
Take a look below, I’ve created a stepped black to white chart, covering a lot of bases for your contrast acceptance.
As you can see from the in-no-way-confusing chart, you’re safe to use any variant of black for your designs (on a white background) that’s above 55% black.
For the astute, you can actually go down to 53.6% black, but that didn’t fit nicely into my chart.
How can I test this?
Luckily for us, there are a series of tools that we can use to measure our colour accessibility.
Below, I’ve used a screencap to show my own colour chart’s accessibility.
The tools
Contraste
A great little app, that I used in the screencap above. It’s free and can offer a simple way to measure your colour combinations.
Get it: https://contrasteapp.com/
Contrast app
If you’re a fan of toolbar apps, this is the one for you. It’s a wonderfully built product that offers a quick and easy way to test your WCAG compliance and copy HEX codes too.
Get it: https://usecontrast.com/
Stark
This one’s a powerhouse. Stark comes in plugin form for your favourite design tools and offers an in depth analysis of your accessibility compliance as well as offering colour blind simulators and colour suggestions.
Get it: https://getstark.co/
Further reading
For the curious, here’s a list of useful articles to push your accessibility standards further.
– Colour contrast —Why does it matter?
– Understanding Success Criterion 1.4.3: Contrast (Minimum)
– The myths of color contrast accessibility
Thank you, and see you next time,
Luis from the UP Design team.
