In forced color modes <mark> elements can have same color as background

[lfdebrux]

Upstream bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1253295
Date: 2021-09-27
Reported by: Laurence de Bruxelles
Related to: alphagov/tech-docs-gem#265

---

Overview

Chrome Version : 93.0.4577.63 (Official Build) (64-bit)
URLs (if applicable) : https://codepen.io/lfdebrux/pen/OJgawWb
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari:
Firefox: OK
Edge: FAIL

What steps will reproduce the problem?

1. Style a mark element with background-color: transparent
2. Enter a forced color mode which uses a black background, for instance Windows High Contrast Mode

Expected result

The text in the mark element should be visually readable.

Actual result

The text in the mark is black, but the element's background is transparent, so you have black on black text which is invisible.

Inspecting with DevTools, it looks like what is happening is that the default mark color property (which is black) is being applied, but not the default background-color property (which is yellow).

This feels like a bug; I don't think the background-color: transparent directive should be respected in forced colors mode.

Ah, just saw the spec on background-color and forced colors:

Else for background-color in particular, it is forced to the color opposite the color property’s system color value in the system color pairings, using CanvasText as the opposite of Canvas. However, its alpha channel is taken from the original background-color value so that transparent backgrounds remain transparent.

https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties

So maybe the bug is that the text color is not forced to CanvasText?

[lfdebrux]

That's correct. We force mark elements to have a yellow background with black text in forced colors mode (we don't force mark elements to use Canvas/CanvasText, otherwise they wouldn't show up as being different from normal text). And as the spec mentions, we will preserve the alpha channel for background-color in forced colors mode. So in this case, we end up with black text on a transparent yellow background, making the text invisible against the base background.

This seems like a content issue, and that the author will likely want to update the text color to CanvasText in forced colors mode if using a transparent background for the mark element. Given this, closing as WontFix.