dequelabs / dequelabs/axe-core

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

Open
#4,610 1 comment 0 reactions 0 assignees View on GitHub
color contrast fix
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

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

Lighthouse Accessibility Test


Black with no brightness adjustment.



Middle gray with no brightness adjustment



Middle gray with 1000% brightness



95% white with no brightness adjustment



95% white with 0% brightness

```

Here is what the rendered example looks like.
![image](https://github.com/user-attachments/assets/38f0cbf6-4d5c-4d6b-a25b-36c2411333be)

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?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.