Test color-contrast of gradients and background with alpha values

[WilcoFiers]

One of the limitations of our existing color contrast approach is that it assumes elements only have a single background color. If we can't come to a single color, aXe gives up.

We can improve that by allowing for a range of colors. For instance, if we know an element has the background rgba(0,0,0,0.8), we can return two colors: The darkest color this could be, by blending this with black, and the lightest color this could be by blending this with white. If both colors pass the contrast ratio calculation with the foreground color it's a pass. If neither do, it's a fail, only if one does and the other doesn't do we get a "cantTell" result.

If we allow for multiple background colors we can do a similar trick with gradient backgrounds, and with texts that have multiple background elements. We simply pass all of those colors back, compute the contrast for each of them. We would have to take into account that in gradient blending colors tend to darken, but a simple threshold for incomplete could solve that.

Note, we're still not computing colors of images, but this actually puts us relatively close to doing that too, because instead of computing everything, we find the lightest and the darkest color in an image and we'll compute contrast with those two.

[WilcoFiers]

This problem is better handled with screen shot testing. There are efforts under way to integrate this into the axe DevTools extension. I don't think this will ever be part of core.

[tounsoo]

Any new updates on this? :D

[straker]

@tounsoo Yep, color contrast checking using screenshots was added to the DevTools extension https://www.deque.com/blog/axe-devtools-extension-update-new-color-contrast-analyzer/