I built a tool that will help you find colours that pass accessibility contrast ratios
Accessibility on the web has always been an important if not often overlooked aspect of design and frontend development and it’s encouraging to see more and more developers engage with building accessible products. There are a myriad of aspects that fall under the accessibility banner — many of which can be daunting and complicated — but one thing that most people can understand and get behind is colour contrast.
Colour contrast essentially boils down to the difference in luminosity (or brightness) between two colours. The Web Content Accessibility Guidelines (WCAG) are quite clear on a benchmark of 4.5:1 for achieving a level AA rating. This should be the minimum we are striving for; particularly if your product uses colour to convey meaning but also if you enjoy people being able to actually read your website.
Recently, I was conducting an accessibility audit on a website and found myself repeatedly hitting a problem. There were many parts of the UI that were failing contrast ratio checks — for example form validation error messages used a shade of red that was inaccessible on a white background. We needed to darken the red so that it reached a 4.5:1 contrast ratio but were unable to find a tool online that would let us identify the ‘closest’ passing red value. We didn’t want to change the hue of the red, we just needed to darken it (ideally by as little as possible to avoid heated arguments with the product designers). I found myself manually tweaking the ‘lightness’ sliders on existing contrast checking tools like the one from WebAIM to try and find that golden 4.5 number.
What I wanted, was an online colour contrast checker that would suggest the nearest colour to use to pass WCAG AA. So I built Four Point Five.
The maths behind calculating colour contrast is somewhat complicated, so I relied heavily on this excellent article from Stacie Arellano on CSS Tricks. I won’t regurgitate the steps here but needless to say Stacie does an amazing job of explaining how contrast is calculated and I highly recommend getting your head around it.
If we take an example of #1abc9c (a teal green) on #ffffff (white), we can see that this has a contrast ratio of just 2.41:1. The fourpointfive.dev tool then suggests that if we have to darken our original foreground colour by 49% to reach #13866f — which will give us 4.5:1.
I’ve started using Four Point Five in my development workflow and whilst it’s not bug free and there are features I want to add (feel free to contribute on Github), I’ve found it extremely helpful. I’d love to hear whether it has helped you out too.
If you like this kind of thing, I have written previously about performing similar automated colour contrast calculations in Sass.
