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
- SCSS functions to ensure safe colors and contrast
- Web Content Accessibility Guidelines (WCAG)
- A Complete Guide To Accessible Front-End Components
Share
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.
Comments
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.