chromium + forcedColors: "true" + colorScheme: "dark" -> wrong color-contrast

[nmerget]

Product

playwright

Product Version

4.9.0

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

The test shouldn't fail with forcedColors:true and colorScheme: "dark".

Actual

test("axe contrast", async ({ page }) => {
  await page.goto("/");
  const { color, backgroundColor } = await page.evaluate(() => {
    const badge = document.querySelector("#badge");
    if (badge) {
      const styles = window.getComputedStyle(badge);
      return { color: styles.color, backgroundColor: styles.backgroundColor };
    }

    return { color: "", backgroundColor: "" };
  });

  console.log(color, backgroundColor);

  expect(color).toEqual("rgb(255, 255, 255)");
  expect(backgroundColor).toEqual("rgb(0, 0, 0)");

  const accessibilityScanResults = await new AxeBuilder({
    page,
  })
    .include("#root")
    .analyze();

  expect(accessibilityScanResults.violations).toEqual([]);
});

The test fails with:

+             "message": "Element has insufficient color contrast of 1.22 (foreground color: #1a1c1e, background color: #000000, font size: 7.5pt (10px), font weight: bold). Expected contrast ratio of 4.5:1",
+             "relatedNodes": Array [
+               Object {
+                 "html": "<span id=\"badge\" class=\"db-badge\" data-emphasis=\"strong\">Test</span>",
+                 "target": Array [
+                   "#badge",
+                 ],
+               },
+             ],

In the forceColors:true mode it shouldn't be possible to have a color like #1a1c1e. It should be white or black, so there should be an error in the analyze function.

How to Reproduce

https://github.com/nmerget/axe-playwright-contrast-issue

I created a simple repo for reproduction. (I can add a GitHub actions if you wish to have the testing output as well)

Additional context

Somehow the snapshots in the timeline and below are different. Maybe the issue coming from analyze creating a new browserContext without using the settings of the context before?

[straker]

Thanks for the issue. I believe this is an axe-core issues as axe-core does not support dark mode nor forced-colors. I'll probably close this as a duplicate of those issues.

[nmerget]

Thanks for the hint :)

I added a workaround. I added -webkit-text-fill-color with *. It's not the prettiest solution but it works :D