dequelabs / dequelabs/axe-core

"Insufficient color contrast" incorrectly raised when `color-scheme: dark` is set

Open
#3,605 4 comments 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 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

screenshot of above html

#### Additional context

Tested with Firefox on Mac.

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.