Categories
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?

Updated April 2024. Please feel free to comment with additions and corrections.

color wheel

33 replies on “Color Contrast Tools”

[…] Show notes: Check out our show, ATFAQ at http://www.ATFAQshow.com Inclusive Design: 12 Ways to Design for Everyone – Shopify http://bit.ly/2Kwhdxl Dennis’ LINKS Adrian Roselli’s blog: http://adrianroselli.com/ Deque Cauldron patterns: https://pattern-library.dequelabs.com/ eBay MIND patterns: http://ebay.github.io/mindpatterns/ Color Contrast Tools http://www.webaxe.org/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:

https://www.myndex.com/APCA/

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,

Andy

Leave a Reply

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