color design roundup tools

Color Contrast Tools

Here are some tools that specifically check for color contrast accessibility issues on websites. And a few related links below. Know any others?

Last updated June 2021. Please comment with corrections.


color wheel

30 replies on “Color Contrast Tools”

[…] Show notes: Check out our show, ATFAQ at Inclusive Design: 12 Ways to Design for Everyone – Shopify Dennis’ LINKS Adrian Roselli’s blog: Deque Cauldron patterns: eBay MIND patterns: Color Contrast Tools […]

You can create an entire color palette by defining the target contrast ratios (rather than auditing after-the-fact) with Adobe’s Leonardo.

It also has a contrast checker that allows you to check contrast of colors that have alpha transparency, which is one thing missing from a lot of other contrast checkers.

This is a very comprehensive list indeed. Most of these are based on the WCAG 2.x era contrast math, which as we know is somewhat limited to to the last 17 years of ever shifting technology.

For the emerging WCAG 3.0, we have developed the new method to replace the older 2.x math. The new method is the APCA — Advanced Perceptual Contrast Algorithm.

It has been incorporated into a number of contrast tools, and the canonical technology demonstrator is:

Among other things, APCA considers important factors such as font weight, and the difference between text and non-textual contrast needs.

But most important, unlike WCAG 2, APCA for WCAG 3 is perceptually accurate as per human perception, so it provides a solid foundation for useful design guidance.

Thank you,


Leave a Reply to Making Bootstrap a Little More Accessible — SitePoint Cancel reply

Your email address will not be published. Required fields are marked *