Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"Insufficient color contrast" incorrectly raised when color-scheme: dark is set #3605

Open
1 task done
geoffrich opened this issue Aug 14, 2022 · 4 comments
Open
1 task done

"Insufficient color contrast" incorrectly raised when color-scheme: dark is set #3605

geoffrich opened this issue Aug 14, 2022 · 4 comments
Labels
color contrast Color contrast issues fix Bug fixes
Milestone
Axe-core 4.11

Comments

@geoffrich
Copy link

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

screenshot of above html

Additional context

Tested with Firefox on Mac.
@geoffrich geoffrich added the ungroomed Ticket needs a maintainer to prioritize and label label Aug 14, 2022
@github-actions github-actions bot added the extension Axe Firefox or Chrome extension issues label Aug 14, 2022
@straker
Copy link
Contributor

straker commented Aug 15, 2022 •
edited
Loading

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)

@straker straker added fix Bug fixes color contrast Color contrast issues and removed extension Axe Firefox or Chrome extension issues ungroomed Ticket needs a maintainer to prioritize and label labels Aug 15, 2022
@straker straker mentioned this issue Apr 6, 2023
Open
1 task
@straker straker added this to the Axe-core 4.8 milestone Apr 6, 2023
@WilcoFiers WilcoFiers modified the milestones: Axe-core 4.8, Axe-core 4.9 Jun 29, 2023
@straker straker mentioned this issue May 16, 2024
Open
1 task
@marktnoonan
Copy link
Contributor

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?

@straker
Copy link
Contributor

straker commented Jul 3, 2024

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.

@marktnoonan
Copy link
Contributor

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.

@straker straker mentioned this issue Oct 15, 2024
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color contrast Color contrast issues fix Bug fixes
Projects
None yet
Milestone
Axe-core 4.11
Development

No branches or pull requests
4 participants
@WilcoFiers @straker @geoffrich @marktnoonan