Understanding Colour Contrasts for Web accessibility
WCAG rule 1.4.3. can be very challenging for designers but it is the one that has the biggest visual impact to your website. Here´s a little help from a friend.
The right colour contrast makes your page accessible to tons of people that otherwise would not have a chance to navigate it properly.
Such as e.g.: colour-blind, near sighted or just people of an older age.
To aid those people we need to make sure that all texts are visible, meaning: the contrast of two colours is high enough.
I´ll start off with quoting rule 1.4.3. so everyone can read the rule in all it´s technical jargon (or maybe you don´t)
“The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”
But what does that mean? What is considered a large text? What is a contrast ratio? And why should I care?
Let´s try to clarify things.
Just like at the optician: the bigger your text is, the easier it is to see.
This means that the colour brightness is defined relative to the text size:
Normal text (<24px regular text / <18,66px bold text) and
Large text (≥24px regular text / ≥18,66px bold text)
Big text needs to have a contrast ratio of 3.0 or higher;
normal text needs to have a colour ratio of 4,5 or higher.
So bigger texts can be lighter.
By the way: It is not relevant if you are talking about real html text or images of text. Both need to comply to the same standards.
The same goes for text on images. but the contrast on an image is very hard to detect — even more so, when the image is maybe random. You basically can only have text on images with (semi-transparent) layers that provide a certain contrast.
It also means that all sorts of non-interactive / decorative elements are exempt to contrast rules. As is any form of logo.
How colour contrasts work
The colour contrast ratio measures the difference between the grey values of two coloures. It ranges from no contrast at all (1) to the maximum contrast of black and white(21).
It doesn´t matter, which colour is background and which is text, the ratio stays the same.
Greytones
Let´s start with greytones first.
Like night and day, on and off, or black and white it is a pretty clear thing to say which one is actually lighter and how far apart the grey values are.
You start with the 1 and end up at the 21 in a simple gradient.
Colours
With colours it is a bit more difficult than with black and white. To be able to tell the contrast, you have to determine their grey values first and compare those. As soon as you diverse from black and white to colour the maximum of 21 can never be reached again, since every color has a darker grey value than white. So colours will always limit your contrast.
But are there differences between colours? Are all colours the same to the eye? Is it maybe up to personal preference?
Do you remember the good old blue links from the 90s? Ever thought of why they looked like this?
The basic R, G and B have very different contrasts on white. With pure blue being the most readable colour and green being unlegible.
So while red might be the most eyecatching colour, it is not the most legible one.
The same rules apply when you have colour on colour.
But since you also eliminate the second extreme from the equasion you just further limit your range and therefore the possible maximum contrast.
Take that into consideration, when you are making a new CI.
How do I work with that?
So we now understand the principles, we know about text sizes and colour contrasts and want to have a look at our own brand.
New CI
Accessibility is of course easiest to implement, when it is introduced to the CI from the beginning.
If you want a neon green logo, that´s fine! It might have a bad contrast on white, but you can just add sufficiently dark colours to the background and you´re fine.
The easiest way is to select your main colour first and work your way on from that. It´s best to have a very dark or light colour to start. This way you can use a variety of combination colours of the opposite lightness spectrum to compliment it.
If you choose to start off with a logo of mid-level brightness, chances are that it won’t work that well with either light or dark combinations, so you might want to check that beforehand. 50% grey works well with white and black, but as soon as you introduce other colours you might encounter some trouble.
Preexisting CI
But let´s face it you won’t have the luxury of starting off your CI from scratch most of the time, though. Depending on your brand´s existing CI, it might become a daunting task to implement WCAG on your website at a later point. With a fully black and white brand, you will have a much easier time to make it compliant, than with a brand that relies heavily on greytones. The chart below illustrates that their brand CI would lose pretty much half of it´s corporate colours because of restrictions imposed by the WCAG AA standard.
So you should start by creating a colour matrix to check your colours and their contrast interaction first.(I´ve added some great tools for that below)
You only have to type in the hex codes and get a value between 1 and 21 for every combination. Afterwards you select the prettiest combinations from the legible ones and you should be good to go.
You also have to check your CI font sizes, especially the responsive states.
Sidenote: in responsive designs your desktop text may be over 18/24px and — your mobile/tablet text might not be. Since you probably don´t want different colours between devices you should opt for the darker one overall.
You should also think about a separate digital CI, that maybe has a few adjustments to make accessibility easier.
e.g.: additional colours or different sizings.
When in doubt
As you can see in the example — WCAG may have a huge impact on your brand colours. Rightfully an existing brand will not want to sacrifice it´s brand identity for accessibility reasons.
Think of a button solution, that enables contrasts on click — this is totally viable and doesn´t impact your brand appearance as much.
Now that we talked about the theory you are either sufficiently confused, or waiting for the mentioned tools …or both.
Tools to check color contrasts
jxnblk.com
http://jxnblk.com/colorable/demos/matrix/ is a very helpful tool.
You can insert all your brand colours there and get a full matrix of which colours go together according to WCAG rules. So you instantly know which combinations can be used.
The same website has another feature: http://jxnblk.com/colorable/demos/text/
You can directly visually see and check texts in specific colours on specific background colours and get the values and the visual impression of the combination, including the contrast value.
This is very good, if you are about to establish an accessible CI and want to visually see and play around with how things will look.
Contrastchecker.com
https://contrastchecker.com/
This is another tool, that has a very practical visualisation of two values. It also has some neat additional functions, like adding a colour combination to your history and then saving a PDF of it. This way you can make your own matrix with a little effort. What´s also quite neat is, that you can see the colours in greyscale to simulate the obstacles in certain colour blindnesses.
contrast-ratio.com
https://contrast-ratio.com/
Is my third example for colour contrasts, it is my personal quick check tool:
It doesn´t have too many functions, but it shows the contrast very clearly and you see the Text in different sizes.
This is very fast to use and the easiest to show colour contrasts to other people (e.g.: clients) who don´t know your more complex tools.
contrast
https://usecontrast.com/
It´s a macOS App to check contrasts with the colour picker tool. The design is super sleek and the usability is good.
I personally prefere browser based though.
stark plugin
https://www.getstark.co/ is a Plugin for Photoshop and Sketch that includes a built in colour checker and colour blindness check. It even suggests fitting compliant colours, which is neat, when you are free to chose colours that are not corporate colours.
If you have any specific questions regarding web Accessibility, feel free to contact me via: patty.forster.design@gmail.com
