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:

Color contrast checker that makes suggestions for better colors

Sick of resizing your browser?

See your page at all responsive sizes at once.

Get Polypane
Back to blog
Thank you for reading this article!

Wait! Join thousands of devs getting tips and tricks on building better websites.

  • Don't miss out on exclusive extra content not available on the blog.

By using our site you agree to our privacy policy and disclaimer