"Insufficient color contrast" incorrectly raised when color-scheme: dark is set #3605
Description
Product
axe Extension
Product Version
extension: v4.33.2 axe-core: v4.4.2
Lastest Version
- 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.