# Color contrast checker that makes suggestions for better colors

For the past week or so I've been helping out with [Coronastatus](https://github.com/BustByte/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](/color-contrast/)

---

Polypane is the browser built for developers and designers — try it at https://polypane.app.