Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility contrast ratio between foreground/background returns incorrect result when a brightness filter is applied #4610

Open
1 task done
nyoungstudios opened this issue Oct 13, 2024 · 1 comment
Open
1 task done

Accessibility contrast ratio between foreground/background returns incorrect result when a brightness filter is applied #4610

nyoungstudios opened this issue Oct 13, 2024 · 1 comment
Labels
color contrast Color contrast issues fix Bug fixes

Comments

@nyoungstudios
Copy link

Product

axe-core

Product Version

No response

Latest Version

  • 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. GoogleChrome/lighthouse#16209 (comment)

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.
image

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?
@nyoungstudios nyoungstudios added the ungroomed Ticket needs a maintainer to prioritize and label label Oct 13, 2024
@straker
Copy link
Contributor

straker commented Oct 14, 2024

Thanks for the issue. Axe-core currently does not support filter: brightness, so we'll need to update our code to handle that.

@straker straker added fix Bug fixes color contrast Color contrast issues and removed ungroomed Ticket needs a maintainer to prioritize and label labels Oct 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color contrast Color contrast issues fix Bug fixes
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@straker @nyoungstudios