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!