Improving accessibiity: fixing colour contrast ratios
Colour contrast ratios are really important. The higher the contrast between the foreground and background colours, the more legible your content is.
Black text on a white background – or vice versa – gives you a ratio of 21:1. That's the highest you can get.
The worst you can do is the same colour on the same colour - that’s a 1:1.
All the ratios are to :1 – so I’ll just give absolute numbers from this point onwards.
Firstly, you need to know whether you have any offending elements. The best way to do that is to use Lighthouse in Google Chrome’s DevTools or PageSpeed Insights.
Look out for `Background and foreground colors do not have a sufficient contrast ratio’.
Either you’ll find a few elements you need to change, or maybe you’ve been lucky enough to choose the right colours already.
There are different thresholds for sufficient colour contrast depending on how stark you want the contrast to be and the font size.
| Threshold | Ratio |
|---|---|
| AA Normal | 4.5 |
| AAA Normal | 7 |
| AA Large | 3 |
| AAA Large | 4.5 |
And, what are large and normal?
- Normal: 24px
- Large: 16px
So now you know what you need to do, because you look at the font size of an element, choose whether to be AA or AAA, you know what ratio you’re aiming for.
Something I tend to forget but it’s really important, for AA Normal 4.5 is not a pass, it’s the threshold, it’s a number above 4.5 you need. This applies to the other three too.
But how do you know what colours to use?
As a rule of thumb, if you have a darker background and a lighter foreground, you can either make the background even darker or the foreground even lighter, or both.
And the opposite is true too.
And getting the precise ratio? It’d be a waste of your time to just guess, so I’ve made a free colour contrast checker tool.
Sorting this out on your website improves your web vitals and it makes your website much more accessible to people living with visual impairment and dyslexia.