Skip to content

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

Open
@fdelapena

Description

@fdelapena

Product

axe-core

Product Version

4.10.0

Latest Version

  • 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):

<doctype html>
<html lang=en>
<meta charset=utf-8>
<meta name=description content="Some test">
<title>Test</title>
<p>Some <a href=//example.org>link example</a>.
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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions