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

Newsletter

Level up your skills with useful UX, web development, and productivity tips via e-mail.

Comments

If you have any thoughts, please contact me on LinkedIn or see the contact page for more options.