What is colour contrast accessibility?
Colour contrast whatnow?!
I went freelance almost two years ago now, having done an almost-10-years-stint working employed in various ecommerce roles.
And in the past two years, only ONE of my clients was aware of this concept.
So - don’t feel bad if you haven’t got a scooby-doo, either.
In fact, I put a poll out on my Instagram stories just to double check that this was an alien concept to most people, and yup - 84% of you guys weren’t aware of this SUPER important design consideration.
But colour contrast accessibility isn’t just a concern for designers - if you have any sort of digital presence (whether that’s a service-driven business or ecommerce), this is VITAL for your brand’s inclusivity; both ethically and practically.
Ready to dive in? 👇
1. Get to the point - what is colour contrast accessibility?
In short, it’s a measurable web standard (or WCAG - Web Content Accessibility Guidelines) that you can ‘pass’ or ‘fail’.
It determines how accessible your text is for those with eyesight difficulty. This refers to the contrast between your background colour, and your text colour.
The two main components that affect that contrast of your two colours are: hue (eg. yellow and blue), and light vs dark - but I’ll get into that in minute.
‘Eyesight difficulty’ includes: those with partial blindness, older customers with deteriorated eyesight, or even those with colour blindness.
So if your brand claims to be inclusive, you’d better sit up and pay attention.
In fact, in the USA companies are actually being sued for not being accessible to those with blindness - read: this is something to take seriously.
Image courtesy of Smashing Magazine
2. You’ve got my attention. So, why is it important?
In a word: inclusivity, both for your customers' benefit and for yours.
It’s all about making sure that everyone has a good digital experience of your brand, because - of course - if people have a good experience, they’re more likely to convert.
Something that is super clear for those of us who DON’T struggle with these things can be really confusing for those with colour blindness - take the example below, for example.
Image courtesy of Smashing Magazine
See the ‘Go Green’ button above? Once the colours are flipped, it’s easy to see how the contrast between the white and green just isn’t good enough.
And whilst the graphic below is BEAUTIFUL - can you honestly (easily) read the white text? Now imagine how frustrating that experience would be for anyone with some sort of eyesight difficulty.
Not. Cool.
3. OK, so what are the rules?
So, there are two levels of standard - AA and AAA. Both are considered a ‘pass’, so it just depends HOW inclusive you want to be.
And within this, there are two tiers again - one for body text, and one for title text (or, anything bigger than ~20px).
For AA, the minimum contrast is 4:5:1 for text below 20px, and 3:1 for text above 20px.
For AAA, it’s 7:1 for text below 20px, and 4:5:1 for text above 20px.
For example, you’ll notice that I use yellow for title text, but not for body copy - This. Is. WHY!
Image courtesy of Smashing Magazine
But what does that even mean?
It’s a whole mathematical world that calculates the colour’s placement on the hue map, as well as its light / dark contrast.
So using colours on opposite sides of colour wheel will lead to a higher pass rate, as well as using a light colour on top of a dark colour (or vice versa).
Image courtesy of Smashing Magazine
But let’s not worry about what’s behind the calculation - all you need to know is if you PASS or not.
4. So, how can I make sure I’m compliant?
Tanaguru is an AMAZING tool that not only gives you the colour contrast ratio of your two colours (remember - you want higher than 4.5) but also suggests some new colour combinations to fix it, if it’s too low.
All you need is your hex codes (the six-digit colour code that follows a hashtag eg. #09163e). If you don’t know what your two colours’ hex codes are, you can get a Chrome plugin like the one I use, which let’s you colour drop from your website.
Hex Naw lets you test multiple hex codes at once, so it’s great for if you’re creating a whole colour palette for your brand.
A friend showed me this one recently, and it’s been a game changer! I now use this when I’m working on branding project, and it saves me checking every colour combination individually to determine which colours from the brand’s palette can be used on top of which.
Toptal is great for viewing your website through the eyes of someone with a particular colour-blindness condition - just pop in your website’s URL, wait a minute (literally - it’s a little slow…) and then nosey through the different views on the dropdown.
Or - reach out! I’m happy to take a look at your website and let you know if it passes. (I’m nice like that).
5. Almost done - what does this actually apply to?
Basically, all text.
Technically speaking, it DOESN’T apply to logos, but I always take WCAG (remember this one? Keep up! It’s Web Content Accessibility Guidelines) seriously it for my clients - on logos, too.
Why? Because I work with good folk; with caring people. And inclusivity matters.
And like I said earlier, it’s extremely rare that my clients have heard about this concept (be real honest - did you know about it?) but once I talk them through its importance, they get it.
Phew, a lot to take in, but I hope it’s now a little clearer?
Extra reading:
Here’s a great Smashing Magazine article that explains this well - I’ve also borrowed their visual assets for this post.
And for reals, if you’d like me to take a look at your website and / or your branding and let you know if you currently pass - reach out.