WebAIM Contrast checker tool

I see too many designers and developers who forget about accessibility. One of the most common oversights when it comes to designing attractive websites is color contrast (another is too small font size).

There is a simple tool that can help you with that: WebAIM Contrast checker tool. Just type two colors, foreground and background, and see WCAG level of conformance (read more about accessibility guidelines and conformance levels on w3.org).

WebAIM Contrast checker has also a basic API, so you can implement it to check contrast automatically. API returns JSON object with the contrast ratio and the AA/AAA pass/fail status. Just append &api to any permalink, e.g. https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF&api

More detailed info about color combination

Who Can Use is a tool that brings understanding to how color contrast can affect different people with visual impairments. Check it if you want to know more about a specific color combination.

See also


Thanks for reading. If you liked it, consider sharing it with friends via:

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

I want to be up to date via email!

No spam ever (I don't like spam, I don't send spam). You can unsubscribe at any time. Privacy Policy

Don't you want to subscribe via e-mail?

See other ways to keep in touch.


If you want to comment, write a post on social media and @mention me. You can also write to me directly on the contact page.