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 #16209

Closed
3 tasks done
nyoungstudios opened this issue Oct 3, 2024 · 1 comment
Closed
3 tasks done

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

nyoungstudios opened this issue Oct 3, 2024 · 1 comment
Assignees
@connorjclark
Labels
bug needs-priority

Comments

@nyoungstudios
Copy link

nyoungstudios commented Oct 3, 2024 •
edited
Loading

FAQ

URL

local example

What happened?

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.

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>

What did you expect?

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.

What have you tried?

No response

How were you running Lighthouse?

Chrome DevTools

Lighthouse Version

12.2.0

Chrome Version

129.0.6668.72 (Official Build) (64-bit) (cohort: Control)

Node Version

No response

OS

Windows 11

Relevant log output

No response
@adamraine
Copy link
Member

This is reproducible with Axe outside Lighthouse, can you file a bug in axe-core

@nyoungstudios nyoungstudios mentioned this issue Oct 13, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@connorjclark connorjclark

Labels
bug needs-priority
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@connorjclark @adamraine @nyoungstudios @devtools-bot