Skip to content

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

Closed
@AmeliaBR

Description

@AmeliaBR

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    SVGa11y-trackerGroup bringing to attention of a11y, or tracked by the a11y Group but not needing response.css-color-adjust-1Current Work

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions