Check non-text contrast

[TastyPi]

Product

axe-core

Feature Description

This is part of WCAG21 https://www.w3.org/TR/WCAG21/#non-text-contrast.

It looks like color-contrast and color-contrast-enhanced only check elements with text in them based on their documentation. If they do also test graphical elements then the docs need updating.

I imagine this hasn't been implemented because it's hard to tell if an empty element is intended to be graphical. It would at least be nice to have the option to run a checker on elements we know are graphical, for example we have a "status dot" that can be different colours and appears on different colour backgrounds, it would be great if we could check its contrast everywhere it appears.

[straker]

Thanks for the issue.

[Kosai106]

Our new designer just brought this up to me as well, which surprised me as it hasn't been caught in our automated testing 👀

[straker]

The main reason it's not caught is because we can only get the foreground color of text content (using the color CSS property), where as there's no standard way to get the foreground color of a graphical element. @Kosai106 do you have some examples of what you expected to be checked that was?

[Kosai106]

@straker things like border colour on inputs, buttons and other interactive elements basically.

[Kosai106]

Actually, come to think of it @straker, wouldn't it work to check against the border color and/or outline color if either are present on interactive elements? It's not a foolproof way of doing it of course, but in theory that should work for most usecases I believe, no?

[TastyPi]

For our use case, we have a dot implemented as a background-color and want to check it against the parent's background-color (or whatever ancestor sets it if the direct parent doesn't). That's trickier to know to detect, but checking the borders/outlines would also be useful.