A beginner’s guide to black on white colour accessibility

Luis Ouriach
Nov 8 · 3 min read

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…

Let’s take a look at how we use black text on white backgrounds; a popular combo.

Grey is the new grey

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?

Below, I’ve used a screencap to show my own colour chart’s accessibility.

Meta.

The tools

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

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,
The UP Design team.

.pixel from Upgrade Pack

Behind the scenes of the product, design and tech teams.

Luis Ouriach

Written by

Design honcho @UpgradePack. Newsletter writer, co-host @thenoisepod, creator of @8pxmag, @juniordesignjob, @LondonIsYours. Sarcastic.

.pixel from Upgrade Pack

Behind the scenes of the product, design and tech teams.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade