axe-core
axe-core copied to clipboard
dequelabs
Accessibility contrast ratio between foreground/background returns incorrect result when a brightness filter is applied
Product
axe-core
Product Version
No response
Latest Version
- [X] I have tested the issue with the latest version of the product
Issue Description
I initially opened this issue in the Google Chrome lighthouse repo, but was told to open it here. https://github.com/GoogleChrome/lighthouse/issues/16209#issue-2563238733
Expectation
Describe what you expected the product to do.
The Lighthouse Accessibility Contrast test Background and foreground colors do not have a sufficient contrast ratio. should return correct results when a brightness filter is applied.
Actual
Describe what the product actually does.
The Lighthouse Accessibility Contrast test Background and foreground colors do not have a sufficient contrast ratio. returns incorrect results when a brightness filter is applied.
How to Reproduce
Provide a code sample or link to a webpage that reproduces the issue. Without this, your issue may be closed without investigation.
Here is my minimal example. Name this file index.html and place in a folder called test. Then you can run a command like python -m http.server -d test 3000 to serve the html file to run the Lighthouse test in Chrome.
<html lang="en">
<head>
<title>Lighthouse Accessibility Test</title>
</head>
<body>
<!-- should pass, passes -->
<h2 style="color: rgb(0, 0, 0)">Black with no brightness adjustment.</h2>
<!-- should pass, passes -->
<h2 style="color: rgb(147, 147, 147)">Middle gray with no brightness adjustment</h2>
<!-- should fail, passes -->
<h2 style="color: rgb(147, 147, 147); filter: brightness(1000%)">Middle gray with 1000% brightness</h2>
<!-- should fail, fails -->
<h2 style="color: rgb(241, 241, 241)">95% white with no brightness adjustment</h2>
<!-- should pass, fails -->
<h2 style="color: rgb(241, 241, 241); filter: brightness(0%)">95% white with 0% brightness</h2>
</body>
</html>
Here is what the rendered example looks like.
It is pretty clear that the first, second, and fifth lines should pass the Lighthouse contrast test. However, the first, second, and third lines are the ones that pass the Lighthouse contrast test.
Additional context
Any thing else we should know about the issue?
Thanks for the issue. Axe-core currently does not support filter: brightness, so we'll need to update our code to handle that.
