dequelabs / dequelabs/axe-core

color-contrast rule applied when colors not set by author

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

Description

### Product

axe-core

### Product Version

4.1.3

### Latest Version

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

### Issue Description

#### Expectation
When the author sets no colors, I do not expect this rule to be applied.

#### Actual
Alerts a user of an automatic serious axe-core rule failure against links when in dark mode.

#### How to Reproduce
Set the color scheme to honor user preferences:
```
html {
color-scheme: light dark;
}
```
Embed a link:
```
I'm a link.
```

#### Additional context

Using axe DevTools 4.12.1 (older version, but it was where I could copy the message), for an unvisited link using the browser's default blue link color and default gray background, I get this message:
> Element has insufficient color contrast of 2.38 (foreground color: #9e9eff, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

For a visited link (purple) in the same context, I get this message (yes, it's using the same color as the blue, but digging into that is out of scope for my issue):
> Element has insufficient color contrast of 2.38 (foreground color: #9e9eff, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

These are true statements (other than the wrong color for the purple), but they are colors that I (as a user) have chosen, even though they are default colors for browser links and how the browser applies dark mode.

You can see this in action at:
https://adrianroselli.com/demos/support-for-headers-attribute/index.html

White text on a dark gray background, with one lavender link and one lightish blue link.

Run the rules against the links (follow one of the links to ensure one of them gets the visited link color).

While [SC 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) has no normative exception for text not styled by the author, the [Understanding page includes the following Note](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html#:~:text=Note,-Some):

> Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those specified here. This is not a violation of this Success Criterion, provided there is a mechanism that will return to the required values set out here.

My suggestion is that when no color is set by the author, this rule is not run.

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the provided color-scheme CSS and link examples, including visited and unvisited states, then trace the color-contrast rule's handling of computed colors. Done means browser-default or user-preference colors do not trigger this rule, while author-set contrast failures continue to be reported.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.