You know what’s great about getting your text colour contrast right? It will make you stand above 83.9% of the top 1 million sites on the World Wide Web, in one fell swoop.
The WebAIM (Web Accessibility in Mind) organisation publishes a yearly report Opens in new window on the accessibility of the top 1,000,000 home pages. So, not my website or yours – unless you’re Jeff Bezos. They specifically look at the top sites on the interweb.
In the 2022 report, a staggering 83.9% out of 1 million of the top home pages were found to have low contrast text.
Year on year, this is the most commonly-detected accessibility issue.
This means that a large percentage of visitors to those websites will have issues with reading the copy. As the internet is still around 95% text, this is crazy.
Text colour contrast is, in fact, more than just colour
By the way, despite the title of this article, when I say “text colour contrast” I don’t, in fact, just mean colour. Contrast as a design principle refers to difference in light and dark, yes: but also thick and thin, small and large, and so on. This means that you need to make sure your typeface is not too thin.
Yes, I know that thin typefaces, or high-contrast typefaces Opens in new window, look more stylish: and yet, a thin typeface as well as a high-contrast typeface both compromise legibility.
People with vision issues will struggle to differentiate that kind of typeface from the background, even when the colour contrast checker passes the colour combo: lines that are too thin will blur and blend, which makes them illegible.
The Zara example
Take this product page on the clothing giant Zara’s website Opens in new window, with black text on a white background. Even though the text colour contrast might be high enough, this site uses a typeface that’s so thin (and small) it’s barely visible. So the contrast isn’t there at all: it’s all a blur to me.
In my opinion, it’s a miracle this site makes any money at all. And yet, it rakes in billions: just imagine how much more money it could make, if they bothered making their type legible!
(By the way, I’m not the only one who thinks that the Zara website is a total train wreck: check out Peter Ramsay’s UX case study Opens in new window to find out more)
Would you rather look cool, or make sure everyone can actually read your content, and buy your stuff?
I would much rather people could read me, and eventually buy from me. And that’s why I changed this site’s previous typeface to a legible one Opens in new window, but that’s a story for another post.
The double whammy
Sometimes, both the colour and the typeface contrast are wrong. The block of “Lorem Ipsum” below has text in white on pale green, in the Brandon Text Thin typeface. The colour is too light, and the typeface is too thin: this text colour contrast combo is barely legible.
We need an improvement! There you go, I fixed it:
All I’ve done in the image above is change the typeface to Brandon Text Regular, and change the colour to an almost-black. Hooray! I can now see it and read it!
How to sort text colour contrast issues
The bad news is that your own homepage probably has these same text colour contrast and typeface contrast issues. Why am I so sure about this? I told you: I audit many websites, and at least 80% of them make these mistakes.
However, there are good news to follow the bad! These issues are such an easy fix.
Here’s what to do
1️⃣ Go to your website and pick your colour codes using the browser inspector. If you’re not familiar with this tool, install an extension such as ColorZilla Opens in new window. The colour code looks like this: #87bfb4. This is the code for the green in the images above.
2️⃣ Go to one of the many contrast checkers online, for instance Contrast Checker Opens in new window. Insert the background and foreground (i.e. text) colour codes.
3️⃣ If the tool is telling you that the results aren’t accessible, tweak the colours by making them darker or lighter.
4️⃣ Is your typeface weight thick enough? If not, please use a thicker weight. I know, it’s not as pretty. But it’s now legible.
5️⃣ Go back to your website and make the changes (or get your web people to make them).
Nobody cares about your brand colours
But Piccia, I can hear you wail. I can’t change my brand colours!
Bo***cks. Of course you can. Here’s the harsh truth:
Colour is an opinion Opens in new window: nobody cares about your brand colours – apart from you.
Sorry if this hurts.
Here are a few of the many reasons:
Is this dress blue or gold?
It is always so much fun to show the photo of the blue and gold dress that divided the internet Opens in new window, in the context of a conference talk. We’re all in the same room, looking at the image under the same environmental conditions: and yet, the answers I get when I ask what colour the dress is are simply wild.
Nobody will see your brand colours in the same way you do. The way our eyes interpret colours is based on a series of unpredictable physiological, environmental and cultural variables.
The colour of death
Nobody can guarantee that – just to make an example – the purple you chose for your high-market brand will evoke “luxury” to everyone. For some it evokes death: it’s the colour of the vestments Catholic priests wear when celebrating funeral rites. That’s why I can’t stand purple and truly wish it weren’t the colour chosen by feminist movements.
A brand is much more than its colours
Nobody apart from you will see your brand values perfectly expressed in your brand colours: what others care about is the product you sell, and how you treat your customers. A colour won’t make a difference to that.
That’s why nobody will care if you tweak your brand colour and make it darker or lighter when you use it with text, so that other people can read your copy properly because it is now accessible.
Everybody will be happier, in fact, because accessibility is essential for some, and helpful for everyone.
Are you convinced now? Yes? Ok, let’s carry on then and actually get this text colour contrast tweaking sorted.
How to tweak your brand colour
1️⃣ Go to Coolors Opens in new window > Tools > Palette Generator
With this great tool you can create and save your brand palette, as well as carry out essential accessibility checks. When you open the palette generator, Coolors will randomly generate a palette for you. You can then very easily paste in your own brand’s colours in each of the random colours, lock them and save the palette.
In this case, I’m using the beautiful brand palette of one of my favourite clients, the music start-up Music Patron Opens in new win. I’m going to first test the blue and check whether it will work as the background to white text. So I copy the hex code.
2️⃣ With the hex code for the blue in my clipboard, I head off to a simple and easy contrast checking tool Opens in new window. In the “Background” box I paste the colour code, with white (hex code: #ffffff) in the foreground, that is to say the text.
The results of the text colour contrast check in the image above clearly show that this blue is not good enough with white text. The only “pass” is for a font size of above 18pt, for WCAG level AA Opens in new window. It’s not a risk I’m willing to take. So we need to tweak this colour, if we want to use it with white type.
3️⃣ Back in the Coolors tool, click on the hex code for the blue colour, then click on “Picker” in the window that will appear. Select HSB: this stands for Hue, Saturation and Brightness. As a reminder, “hue” is simply another word for “colour”: it’s the position of that specific colour on the colour wheel.
Leave the Hue slider alone. Don’t touch it at all! This will guarantee that technically, you are actually using your brand colour: “hue” is another name for “colour”.
Using the Brightness slider, go darker or lighter.
4️⃣ Copy the new hex code, then go to a contrast checker and see whether the new colour combination makes your text accessible.
Yes! It’s now a “pass” for all accessibility levels: A, AA and AAA. Voilà! You have now added an accessible colour combination to your brand palette. You only need to use it with text and nowhere else: your brand integrity is safe!
It’s time for you to sit back, relax and watch the rewards come in, both in terms of karma, and of actual conversions because now people can read your copy. Well done!
