dequelabs / dequelabs/axe-core
"Insufficient color contrast" incorrectly raised when `color-scheme: dark` is set
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 17
Description
### Product
axe Extension
### Product Version
extension: v4.33.2 axe-core: v4.4.2
### Lastest Version
- [X] I have tested the issue with the latest version of the product
### Issue Description
#### Expectation
No contrast ratio issues reported when `color-scheme: dark` set on root element and contrast ratio is sufficient.
#### Actual
Contrast ratio issues are incorrectly reported.
#### How to Reproduce
Use the following HTML (no styles are applied):
```html
Document
Hello world
```
In the console, the `h1` element's background and text color are computed to be following:
```js
const h1 = document.querySelector('h1');
const { 'background-color': bg, color } = getComputedStyle(h1);
console.log({bg, color});
// > Object { bg: "rgba(0, 0, 0, 0)", color: "rgb(251, 251, 254)" }
```
However, Axe thinks the background color is `#ffffff`:
> Element has insufficient color contrast of 1.03 (foreground color: #fbfbfe, background color: #ffffff, font size: 24.0pt (32px), font weight: bold). Expected contrast ratio of 3:1

#### Additional context
Tested with Firefox on Mac.
Contributor guide
Assessment
This issue has not been assessed yet.