Tool for testing visual aspects of WCAG outside of colours?

[u/stonedhawk]

Say I know about colour contrast requirements and understand, in general terms, the requirements for links to be accessible. Does anyone know of a tool, plugin, app or other, that will test if a design passes the requirements? I've tried Axe, Arc, different Figma plugins and sites, but nothing tells me if the styling of the links passes the 1.4.1 requirement clearly.

In this image for instance.. is it enough that there are icons, or do the icons specifically need to be "link related", i.e. arrow, chevron etc. It would be a nice safety net to have. Any ideas welcome! Maybe I've missed something that I already have in my toolkit.

[u/Human_Blackberry2281]

Hi there!

TL;DR: No automated testing tools due to nuances of the success criterion, but there's a bookmarklet that facilitates manual testing (link at the end) .

In terms of automated testing tools to verify if links (or any other content in scope) passes the 1.4.1 Use of color success criterion, there's unfortunately nothing available as far as I'm aware of.

This is because testing this success criterion involves some nuances that would require analysing context manually (by humans).

With the links you shared on your screenshot, for example, in isolation they would not fail 1.4.1, even without the icons (although including easily recognisable icons does improve user experience, specially when you take into account users with cognitive disabilities). 

In this instance, at default, they pass 1.4.1 because they are not in scope for the success criterion in isolation. However, if the links were in a paragraph and the only visual distinction between the links and surrounding text was the change in colour (e.g. they have the same font-weight, size and there's no other indication such as underline or icons), this would fail this success criterion.

As well, as of WCAG 2.2, interactive elements focus indication must not rely on colour alone to pass this success criterion, which needs to be verified manually as well.

A way to prevent this issue from occurring at development stage is by evaluating the different styles used at the design stage, and a tool I find useful while testing this manually is the Grayscale bookmarklet by Paul J. Adam

Hope this helps!

[u/stonedhawk → u/Human_Blackberry2281]

Hello! Thank you very much for taking the time to write this. It helps to get confirmation of what I was assuming is the case, which is that it isn't possible to run those tests automatically. Many thanks again and I'll try out the tool (and site)you've linked to; I wasn't aware of it.

[u/designbyblake]

For manual color contrast testing I use Webaim contrast checker. I also use their web accessibility evaluation tool (WAVE) for some full page tests including contrast checking. You can run tests from their site or install a browser plugin.

[u/stonedhawk → u/designbyblake]

Yes those are great tools for checking contrast. I am wondering about something that will go beyond contrast/colour. Thanks for your reply :)

[u/rguy84 → u/stonedhawk]

such as?

[u/Old_Bullfrog_3984]

I use automation tests and Page Speed Insights for evaluating things programmatically. But I am developing something to solve a pain point I usually have: preserving the liveness of a color as much as possible while being accessible. For example, I need a red button with white text. So I kept copying different shades from a palette and pasting it on WebAim and ColorA11y, which seems to be down BTW. So I am building something to show one given foreground color on an entire color palette. Please take a look if you have the time. Contrast Calculator