W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

[csswg-drafts] [css-color-adjust-1] Spec currently breaks use of currentColor for SVG icons in WHCM (#6310)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Tue, 25 May 2021 17:03:48 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-901099386-1621962226-sysbot+gh@w3.org>
AmeliaBR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-adjust-1] Spec currently breaks use of currentColor for SVG icons in WHCM ==
For inline SVG icons that need to match the surrounding text color, the recommended technique is to use `fill: currentColor` or `stroke: currentColor`. In addition to being DRY-er than setting an explicit color, this makes sure that the color adjusts to match any forced color changed (e.g., Windows High Contrast Mode).

However, in other SVG, fill colour is part of the graphic and shouldn't automatically be adjusted by high contrast mode.

In #3855, we therefore agreed that `forced-color-adjust: none` should apply to all SVG, *with the understanding that* the `currentColor` technique for inline icons would still work because the *inherited* color from the surrounding HTML markup would already be adjusted.

However, because of other complications, in https://github.com/w3c/csswg-drafts/issues/4915#issuecomment-714624132 it was resolved the forced-color changes apply at *used value time*, which means they don't affect inherited values.

Chromium has shipped this change, and therefore web pages that previously had readable SVG icons in high-contrast mode now have broken icons that don't change to match the currentColor.

As an aside: they hypothetical example @alisonmaher brings up in https://github.com/w3c/csswg-drafts/issues/4915#issuecomment-713086976 doesn't seem like something that would be common (`currentColor` SVG text on top of an explicitly-coloured SVG background). In contrast, the example CodePen above uses a technique (`currentColor` for SVG with transparent background embedded within text) that has been widely advocated as the correct way to do accessible inline SVG icons!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6310 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 25 May 2021 17:03:51 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:27:23 UTC