axe-core
axe-core copied to clipboard
dequelabs
"Insufficient color contrast" incorrectly raised when `color-scheme: dark` is set
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):
<!DOCTYPE html>
<html lang="en" style="color-scheme: dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
In the console, the h1 element's background and text color are computed to be following:
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.
Thanks for the issue. We'll look into how best to handle this.
(for myself: one possibility is to add an element to the DOM with background-color: Canvas to determine what the page's default background color is. Further edit: this also seems to work when using Windows high contrast mode and the background-color value is updated to match the OS accordingly. I even tested with custom color for the background in high contrast settings and it correctly resolved it in Chrome, Firefox, and Edge)
Hi! This turned out to be the cause of some false positives this week with a Cypress component test that uses color-scheme: dark. I'd be happy to do some work on this issue, especially if I can get a couple of pointers in the right direction. I'm assuming we'd modify getBackgroundColor to take advantage of background-color: Canvas which I didn't know about before.
For this situation I'm recommending they explicitly set background-color: Canvas in their component test to get that component reporting correctly.
:root {
background-color: Canvas;
}
Would doing something similar with just CSS work for the rule itself?
We haven't discussed internally how we want to handle this yet. I know we try not to modify the DOM by adding / modifying elements, so adding an element with the background-color may not work.
Got it, thank you. I'll document here if we see this more often, or if spot a way to get the true background color the browser is using in color-scheme: dark without DOM manipulation.