If you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.
For the past week or so I've been helping out with Coronastatus, an online platform that's now live in 20+ countries where people can self-report their health status in relation to the COVID-19 pandemic. One of the things I spent time on was making sure that the site and the colors used were accessible.
Polypane made it super easy to check if a color combination had enough contrast but it doesn't tell you what color would be good enough. There are online tools for that available but they were slow and I quickly decided to built it right into Polypane. In the next version the contrast checker overlay will give you suggestions for better colors:
And as I promised in that tweet, I also started working on an online tool. There are many color contrast checker tools online but they don't update on-the-fly, don't actually calculate the contrast correctly (by not taking alpha into account) or don't give suggestions. I think tools need to be fast, correct and actionable if they're worth using so I decided to build one that is.
It updates on the fly, giving you the ratio and suggested colors as you type your color or as you use the color picker.
It takes transparency into account for the foreground color (mixing it with the background color before calculating the contrast ratio) and the background color (with a warning.)
It suggest the closest color by luminance that meets the required contrast ratio.
It does this for both the AA and AAA levels of the WCAG, and lets you know when the contrast is enough for all text, just for large text, or for no text.
Oh, and it saves your colors and preferred level in the URL, so you can share it out easily :)
Go check it out here:
