dequelabs / dequelabs/axe-core

Color contrast miscalculated due to dark color-scheme background misinterpreted as #ffffff

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

Description

### Product

axe-core

### Product Version

4.10.0

### Latest Version

- [X] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation
The report passes without getting insufficient contrast in `a` element when using dark color-scheme.

#### Actual
The report says the background color is #ffffff when it is likely #000000. The foreground color is calculated as `#9e9eff`.
Additionally, the contrast filter seems to be ignored, where the link foreground should be calculated somehow close to `#ffffff`.

#### How to Reproduce
Set the system to dark mode. Crate a page with the following HTML and CSS and test it with DevTools axe extension (tested with 4.92.0) or Lighthouse (provided with Chromium):

```html

Test

Some link example.
```

```css
html {
color-scheme: light dark;
}

/* optional, secondary issue, seems to be ignored in results as well */
a {
filter: contrast(10);
}
```

#### Additional context
Tested under latest Chromium on GNOME.

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.