search

dequelabs / axe-core

Accessibility engine for automated Web UI testing
https://www.deque.com/axe/
Mozilla Public License 2.0
5.86k stars 762 forks source link

Failure of WCAG's Use Of Color reported in DevTools 4.8.2, where other contrast checkers report conformance #4332

Closed fstrr closed 6 months ago

fstrr commented 6 months ago

Product

axe Extension

Product Version

4.8.2

Latest Version

Issue Description

Expectation

Inline links with no non-color way to identify them need to have a contrast of at least 3:1 with their surrounding non-link text. I was testing a site and saw the "Links must be distinguishable without color" error. According to WebAIM's and TPGi's contrast checkers, the color combinations are conforming, so shouldn't have failed. The expectation is that colors are correctly compared and errors aren't erroneously reported. Note: after looking at this a little more, I'm now not 100% sure whether Axe DevTools is right or wrong here.

Actual

The product gives a contrast ratio of 2.51:1 between the link and non-link text, where other tools give a contrast of 3.06:1.

Axe DevTools seems to be converting the semi-transparent black color to #212121, which then causes the lower contrast ratio:

screen grab of axe dev tools showing the error message

Compare that to WebAIM's contrast checker using the actual values from the CSS:

screen grab of WebAIM's contrast checker showing a passing level of contrast

How to Reproduce

Here's a CodePen containing a sample paragraph with an inline link with no underline. The two colors are:

  1. Text: #000000de (black with 0.87 alpha)
  2. Link: #255EAD

Open that page in a browser and use dev tools to scan the page. Once the scan is complete, there will be a Link Must Be Distinguishable Without Color error. Expand the error message to see the description.

dylanb commented 6 months ago

Hello @fstrr - nice to see you here!!

@straker looks like a false positive to me

straker commented 6 months ago

I can't say for certain if this is a false positive or not. Need someone who knows the color spec better than I do. From our code standpoint though, when we try to get the foreground color we have to blend the foreground color into the background color to resolve the transparency. This uses the simple alpha compositing function which results in the color being rgba(33,33,33,1) or #212121. I noticed that the webaim color picker doesn't ask what the background color is so I'm not sure how they decide what the final foreground color is since the background color will blend into the foreground color due to the opacity.

straker commented 6 months ago

I think I understand what the WebAIM's color contrast picker is doing. If you type #212121 into the foreground color with a background color of #ffffff, then you get a contrast ratio of 16.1:1, which is the same contrast if you put #000000de into the foreground color. It appears that it's blending the foreground color into the background color to give the contrast. So if you put the foreground color of the link into the background color spot, I'm thinking it gives a blended color result for those two, which will be incorrect as it's trying to blend the text color into the link color.

In this case I believe axe-core is correct on the contrast between the two colors taking into account the blending of the background for the paragraph text.

fstrr commented 6 months ago

FWIW, TPGi's Colour Contrast Analyzer has almost the same result at WebAIM's (although it claims a contrast of 3.07:1 instead of 3.06:1) when color codes are pasted into the tool:

screen grab of TPGi's colour contrast tool showing a contrast of 3.07:1

TPGi's tool only allows alpha channels on foreground colors, so I can't swap the two around to get a different result.

I think your assumption is correct that WebAIM, and TPGi, are blending the two colors and, thus, getting it wrong. Incidentally, I did discover that WebAIM has a separate link color checking tool that I hadn't seen before but wish I'd known about.

I updated my codepen to add a paragraph of blue text on a partially transparent background and, using the color contrast checker in Edge's dev tools, I get the same 2.5:1 contrast ratio that axe dev tools does:

screen grab of Edge's color tool showing a contrast of 2.5:1

Conclusions

  1. When testing for Use Of Color with links, TPGi's tool shouldn't be used to paste in CSS values for semi-transparent colors as it's missing the essential third color to specify background.
  2. Use WebAIM's link color checking tool and not their basic color contrast tool
  3. Axe Dev Tools does seem to be doing the correct thing.
  4. I don't think there is a bug here and this can be closed.