Axe fails with new color spec

[enyo]

Product

axe-core

Product Version

No response

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

I’m using oklch on my page. I have added a media query to test if the browser supports it, and fall back to rgb() if not. I expect axe-core to either ignore my oklch definitions, or be able to parse them properly.

Actual

axe-core fails with:

axe-core Error: Unable to parse color "oklch(0.992 0.03 171.25)”

How to Reproduce

<div>Test</div>
<style>
  div {
    background: #000;
    text: white;
  }
  @supports (color: oklch(0% 0 0)) {
    div {
      background: oklch(0% 0 0);
    }
  }
</style>

Additional context

This prevents me from using the new color syntax since my accessibility tests completely break.

[bramus]

Was just about to file a similar issue, after I noticed it couldn’t parse oklab colors: axe-core Error: Unable to parse color "oklab(0.876139 0.0000397742 0.0000175595)"

My snippet specifically uses the color-mix function:

--bgcolor: red;
background: color-mix(in oklab, var(--bgcolor), white 20%);

When changing the colorspace to srgb it still fails, as the value axe then tries to parse is the generic color(…).

[WilcoFiers]

Thanks for reporting. We clearly missed something here.

[straker]

@enyo Could you elaborate on what you mean that this completely breaks your accessibility tests? I tested out the code and axe-core does not crash but instead just reports the problem as an incomplete issue of color-contrast. Are you checking the incomplete property of the axe results in your tests?

[bramus]

It breaks the accessibility test in Lighthouse, which uses axe-core under the hood.

See https://twitter.com/bramus/status/1655504052518637569 + follow-up tweet for an example report.

[straker]

Thanks for the added context, that helped a lot to understand what is going on.

[enyo]

@straker exactly as @bramus said: it breaks my lighthouse tests, and so I can’t use the color because then I just don’t get a meaningful result (and I wouldn’t settle for anything less than 100 anyway 😉)

I too reverted to using basic colors but I’d love to use the new ones because they are just more vibrant on displays that support them.

[enyo]

@straker wow! Thanks for the quick fix. Do you know when this will be available on pagespeed.web.dev?

[straker]

@enyo Can't say for certain but I feel that they do a good job of keeping up-to-date on patch releases.

[padmavemulapati]

Validated with the lates axe-core develop branch code base,

now not seeing failures for color combinations, like hwb(), lab(), lch(), oklab(), and oklch().
We are supporting all those css color specs [hwb(), lab(), lch(), oklab(), and oklch]

Screen.Recording.2023-05-25.at.11.28.34.AM.mov

[wokalek]

Still have this issue.

You can run test lighthouse on evilmartians.com which is will fails. They have only oklch colors.

[straker]

@wokalek I tested the page with [email protected] and it doesn't break the color contrast test. Looks like lighthouse pulled in 4.7.2 a few weeks ago. I tried to run lighthouse on the page but it just freezes on "Lighthouse is warming up..."

[wokalek]

@wokalek I tested the page with [email protected] and it doesn't break the color contrast test. Looks like lighthouse pulled in 4.7.2 a few weeks ago. I tried to run lighthouse on the page but it just freezes on "Lighthouse is warming up..."

I know this issue with "Lighthouse is warming up...", that's another (:

You can chrome://restart if you see this issue in lighthouse. Retest please.

[wokalek]

@straker
Testing in guest window.

[enyo]

I just tested on PageSpeed Insights and my oklch colors finally pass! :)