KB006 Using ANDI for Basic Color Contrast Testing

Why Use ANDI?

Analyzing color contrast is pretty easy to do using automated testing tools like WAVE. And, color contrast tools are also built into Microsoft Edge and Google Chrome. But ANDI can be one of the easiest tools you can use– especially if you are using ANDI already. Installing and using ANDI is incredibly simple because it is a JavaScript bookmarklet, so it installs and works in just about any modern browser.

Using the ANDI Color Contrast Tool

In the screenshot below, we have invoked the ANDI bookmarklet on a WebAlign page in which we inserted some color contrast problems. The next step is selecting the “color contrast” tool in the dropdown tool selector.


In the screenshot below, we can see the results of invoking the color contrast. Immediately, the two color contrast issues are immediately highlighted. Then, hovering over the issue on the left, ANDI reported that the text has a color contrast ratio of only 3.73:1 and that this fails WCAG.