Closed fstrr closed 6 months ago
Hello @fstrr - nice to see you here!!
@straker looks like a false positive to me
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.
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.
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:
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:
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:Compare that to WebAIM's contrast checker using the actual values from the CSS:
How to Reproduce
Here's a CodePen containing a sample paragraph with an inline link with no underline. The two colors are:
#000000de
(black with 0.87 alpha)#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.