The Magic of Mid-Contrast Colours
By now it should go without saying, but accessibility is a key part of design. If people are having difficulty using your product because of basic accessibility issues, no amount of “bug fixes and minor updates” are going to get people to use it. Creating accessible products involves a lot of small but important decisions, but for this article I’m going to focus on colour contrast.
Colour contrast is an important piece of the accessibility puzzle because it affects everyone that uses your product. While some people are more comfortable reading small text than others, and “only” 5% of people have colour blindness…we’ve all experienced one of these two scenarios:
● Using your phone outside during the day
● Turning down your phone’s brightness to save battery
In both of these situations, when the colour of text is too close to the background colour (aka “low contrast”), it becomes difficult or even impossible to read. As product designers, we should be capable of making things that stand the test of sunlight and low-battery-induced panic.
To be WCAG 2.0 AA accessible (the generally accepted standard), the colour contrast ratio of normal-sized text to its background needs to be greater than 4.5:1. For context, black text on a white background has a colour contrast ratio of 21:1.
I discovered a neat property about colours that have a contrast ratio of exactly 4.5:1 with white — they ALSO have a 4.5:1 contrast ratio with black! These are what I’m calling “Mid-Contrast Colours”, and they’re pretty magical.
What does this mean in practice? It means that you can use Mid-Contrast Colours in your brand guidelines without worrying whether they’ll be used on a white or black background. It also means that you can use them as background colours with either white or black text, and still pass AA accessibility.
Luckily, finding your own Mid-Contrast Colour is easy: just head over to accessible-colors.com, enter “#FFFFFF” (white) as your text colour, and drop in whatever colour you’d like to convert. The middle result will always return a colour with a 4.5:1 contrast ratio — there’s your Mid-Contrast Colour! The site generates it by modifying the brightness value, so the hue and saturation of your original colour stays the same.
One thing you’ll discover is that the range of these magical colours is fairly slim…and some them are pretty unappealing. If you were hoping to find a mid-contrast yellow, I’m afraid you’re out of luck. Yellow is a bright colour, so it should only be used in conjunction with dark colours (despite white text on yellow being, like, soooo trendy right now).
So that’s it — go forth and enjoy your magical new Mid-Contrast Colours! Remember that colour contrast is just one piece of the accessibility puzzle, and that you should never rely exclusively on colour for anything important in an interface. You should also always preview what your selections look like for people with different types of colour blindness using tools like Sim Daltonism.
I’d like to give a shout out to George Zamfir for being my accessibility Obi-Wan Kenobi. Not only did he broaden my understanding of accessible design, he even proofread this article while vacationing in Spain! Truly a fine fellow.
I’d also like to give a shout out to the letter ‘u’ in the proper English spelling of ‘colour’. America may have gotten rid of ‘u’, but ‘u’ will always have a place in the heart of this Canadian 🙂🇨🇦.