Tailwind CSS's bg-[#fff]/15 Compiled to oklab Causes Color Contrast Error in Lighthouse Accessibility Audit

[in-ch]

Product

axe-core

Product Version

No response

Latest Version

• [x] I have tested the issue with the latest version of the product

Issue Description

Expectation

When using Tailwind CSS's bg-[#fff]/15 class, a color contrast error is triggered in Lighthouse's accessibility audit. This class compiles to background-color: oklab(100% 0 5.96046e-8 / .15), which appears to cause the issue.

This error occurs consistently when auditing a page containing the following code:

<div className="w-full h-[278px] bg-[#fff]/15">
  <p className="text-black">Test Text</p>
</div>

In contrast, using an inline style with background-color: rgba(255, 255, 255, 0.15) does not produce the same error. rgba is a standard color model that Lighthouse correctly interprets, avoiding the error.

The oklab color model, while supported in modern browsers, may not be accurately processed by Lighthouse's color contrast calculation algorithm.

What did you expect?

I expected bg-[#fff]/15 to work without triggering a color contrast error in Lighthouse's accessibility audit, as it visually renders a semi-transparent white background.

Alternatively, I expected Tailwind CSS to compile this to a widely supported color model like rgba, or for Lighthouse to correctly handle the oklab color model without flagging an error.

What have you tried?

Replaced bg-[#fff]/15 with an inline style: style={{ backgroundColor: 'rgba(255, 255, 255, 0.15)' }}. This resolved the Lighthouse error, confirming that rgba is processed correctly.

<div className="w-full h-[278px]"
    style={{ backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
>
  <p className="text-black">Test Text</p>
</div>

How to Reproduce

Sample Code

yarn install

yarn dev

Additional context

I believe the issue might have occurred during the color parsing process. The project includes a dependency on the Colorjs library, but it seems that the version currently in use is not the latest.

Given that there have been many recent issues related to OkLab in the Colorjs repository, I suspect that updating the dependency might resolve the problem.

[straker]

Thanks for the issue.