Bug testing color-contrast when forced-colors active in v4.6

[nolandanley]

Product

axe-core

Product Version

v4.6

Latest Version

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

Issue Description

Expectation

When running color-contrast checks with forced-colors active, the colors used in the contrast calculation should be the colors presented with forced-colors.

Actual

The foreground color is calculated from the non-forced color and the background is calculated from the forced color.

How to Reproduce

I don't think one will be needed, but I can try to come up with one if needed.

Additional context

In this commit, get-foreground-color was changed to use -webkit-text-fill-color rather than color. This property is unchanged when forced-colors is active. The background, however, is still using the background-color property which does change when forced-colors is active.

This introduced a regression to my company's use of axe-core running color-contrast when forced-colors is active since it now uses a mix-and-match of forced and non-forced color values. I think it's probably unintended to mix-and-match, but I'm curious if axe-core even intends to support running color-contrast with forced-colors active.

[straker]

Thanks for the issue. I believe an example code would be helpful as I'm not sure exactly what the ask is. From your context, it sounds like your site uses -webkit-text-fill-color for some of your colors, which don't get changed when forced-colors is set? Or are you saying that your site does not use -webkit-text-fill-color but somehow foreground color is using it?

[nolandanley]

<!-- 
  Copyright 2023 Google LLC.
  SPDX-License-Identifier: Apache-2.0
-->

<style>
  a { background-color: yellow }
</style>

<a href="#">link</a>

From the Chrome devtools console:

a = document.querySelector('a')
window.getComputedStyle(a).color
// output: rgb(0, 0, 238) (blue)
window.getComputedStyle(a).webkitTextFillColor
// output: rgb(0, 0, 238) (blue)
window.getComputedStyle(a).backgroundColor
// output: rgb(255, 255, 0) (yellow)
// IN THE RENDERING TAB, SET FORCED-COLORS TO ACTIVE
window.getComputedStyle(a).color
// output: rgb(255, 255, 0) (yellow, as seen in current UI)
window.getComputedStyle(a).webkitTextFillColor
// output: rgb(0, 0, 238) (blue, not seen in current UI)
window.getComputedStyle(a).backgroundColor
// output: rgba(0, 0, 0, 0) (black)

Visually, the link is going from blue against yellow when no forced-colors setting is applied to yellow against black when forced-colors is set to active. Since the value of -webkit-text-fill-color is not changing between forced and non-forced rendering states, blue appears to be considered the foreground color regardless of this setting, while the background-color value is updating as expected. With forced-colors set to active, the contrast should be calculated between yellow and black. What we seem to be seeing is the contrast calculated between blue and black. It doesn't appear to honor the foreground's forced color because the value of -webkit-text-fill-color stays the same.

	forced-colors: none	forced-colors: active
visual UI	blue against yellow	yellow against black
axe-core contrast calculation	blue against yellow	blue against black

From the code, it appears the foreground color is being calculated from -webkit-text-fill-color. I see there's also a fallback for the color property, so I'm wondering if -webkit-text-fill-color is never coming back undefined despite not being directly set, in which case the color fallback is never being used and the forced color foreground is not being calculated correctly. My apologies if I've misunderstood something; I'm raising this on behalf of someone from my company, and this is the issue as I understand it from them. I don't see anything in their test that is setting -webkit-text-fill-color directly, just color and background-color.

[straker]

Thanks for the code sample, that was very helpful. I know that our code does not support High Contrast mode or color-scheme settings. #3605 is set to track supporting that, I'll leave this one open to ensure we support forced-colors as well.