No contrast information available

[Th3S4mur41]

In many cases, the text color info doesn't show contrast information.
Tested in Edge 102.0.1249.0 (Official build) canary (64-bit) with both the regular WCAG AA/AAA guidelines and the experimental APCA ratio.

Chrome 103.0.5054.0 (Official Build) canary (64-bit) has the same issue.
Firefox 101.0b4 (64 bits) on the other hand is showing a contrast ratio as expected for the same content

[captainbrosset]

Thank you for filing this. Indeed, that's odd. There are probably cases where the DevTools backend is not able to retrieve the background color easily, and gives up on calculating the contrast.
Let me try to see if I can isolate a test case.

[captainbrosset]

Here is one test case where contrast calculation fails, but there might be others:

1. Open the following URL data:text/html,<style>div::after {content: " World!";color: lightcyan;}</style><div>Hello
2. Select the ::after pseudo-element in the Elements panel
3. Click on the color swatch next to the color property in the Styles panel

If you, instead, select the <div> element in the Elements panel, the div::after rule still appears in the Styles panel, and clicking the color property there does show the correct color contrast information. So this seems limited to when a pseudo-element is selected.

But again, there may be other limitations to the current contrast calculation logic.

Because this happens in Chrome too, I opened an issue on bugs.chromium.org to track this: https://bugs.chromium.org/p/chromium/issues/detail?id=1324512

[captainbrosset]

Feel free to take a look at the chromium issue referenced before. There is good conversation happening about the limitation. It seems there's hope for putting something in place that would work in all cases, but so far no firm plan.

[Th3S4mur41]

The problem doesn't seem to be limited to pseudo element...
I could reproduce it on custom checkbox using a <span> within a <label>

I also tried to set the background-color on the <span> directly, without impact on the problem

[captainbrosset]

Yeah, the current logic checks if the element only has 1 child node and if it is a text node. Because the <span> contains 2 child nodes (comment node and text node), then the logic fails.
I'll add your test case to the chromium bug. Thanks!

[captainbrosset]

The upstream bug has been merged into this other one: https://bugs.chromium.org/p/chromium/issues/detail?id=1105775
No recent activity on it unfortunately.