dequelabs / dequelabs/axe-core

Potential false positives with `font-variation-settings` and `color-contrast`

Open
#3,305 0 comments 0 reactions 0 assignees View on GitHub
color contrast feat
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

Product: axe-core `4.3.5`

Expectation: axe-core should not raise a false positive when setting [`font-variation-settings`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings)

Actual: A false positive is raised

Motivation: No false positives

The following CSS creates a `14 point` font with a `900 weight`:

```css
.font-variation-setting {
background-color: #fff;
color: #878787;
font-size: 14pt;
font-variation-settings: "wght" 900, "wdth" 200;
}
```

For 2 elements, one with and one without `font-variation-settings` looks like the following:

![two 14pt fonts, the one with font-variation-settings bold, the one without normal](https://user-images.githubusercontent.com/1062039/142679208-9469d354-f90d-44fb-aab9-275410dc93e0.png)

[Related Codepen](https://cdpn.io/scurker/debug/BadMPjd/PBkNWRozyDbM)

axe-core currently flags both as color contrast issues,

It appears `window.getComputedStyle(...).fontWeight` returns the font weight of the inherited `font-weight` value and not the one from `font-variation-settings`. Checking the value from `fontVariationSettings` in computed style would likely resolve this 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.