-
Notifications
You must be signed in to change notification settings - Fork 753
Description
Background:
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.
https://drafts.csswg.org/css-color-adjust-1/#propdef-forced-color-adjust
However, because of other complications, in #4915 (comment) it was resolved the forced-color changes apply at used value time, which means they don't affect inherited values.
https://drafts.csswg.org/css-color-adjust-1/#forced-colors-properties
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.
https://twitter.com/stommepoes/status/1397186894866288647
https://codepen.io/_mallory/pen/qBrjNpK
https://bugs.chromium.org/p/chromium/issues/detail?id=1213073
As an aside: they hypothetical example @alisonmaher brings up in #4915 (comment) 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!