CurrentColor SVG in forced colors modes (2022)

Table of Contents
Responses Blog pagination

Posted

Note: this post assumes familiarity with forced colors modes styling and Windows High Contrast, now called “Contrast Themes” in Windows 11. Refer to “Styling for Windows high contrast with new standards for forced colors” for a primer.

If you’ve been optimizing your web content for various color modes for some time, you may be familiar with using currentColor as an efficient way to manage single-color SVGs. Traditionally, setting currentColor to the strokes and fills of SVG parts…

Visit the Pen Forced Colors: Simple SVG Demo by Melanie Richards (@somelaniesaid) on CodePen.

…has meant that those SVG parts automatically inherit the SVG parent’s color value in the active color scheme. This has been true for your developer-provided light and dark modes styles, as well as forced colors modes such as Windows High Contrast:

CurrentColor SVG in forced colors modes (1)

If you’ve tried to use this technique in the past few months and found that your SVG appeared “broken” in Windows High Contrast mode on Chromium-based browsers (i.e. the SVG is not rendering in a forced system color), don’t worry—you are not imagining things.

The described currentColor technique was broken by a CSS specification change, in which the CSS Working Group decided that forced color values should be applied at used value time. Previously, they were applied at computed value time. I was not active in the CSS WG during this period, so can’t comment from firsthand experience, but it appears the change was made in large part to help clarify how animations and transitions behave in forced colors modes. currentColor, when used in the color property, inherits its parent’s computed color value. So, this spec change means that the SVG would inherit whatever that parent’s color was before forced color values were applied to web content.

Because the Chromium implementation was updated to match the spec, the logo example currently looks like this in a dark Windows High Contrast theme in MS Edge v96:

CurrentColor SVG in forced colors modes (2)

The logo in this example is as least still visible, because we have provided a dark mode theme with prefers-color-scheme: dark, and the SVG is inheriting the light color we’ve used for the link in our dark mode styles. However, it would be better for this logo to pick up the system link color in forced colors modes, so that 1) it is rendered in the user’s chosen link color, with their preferred level of contrast and 2) the user knows that this is part of an invokable link target.

The proper way to deal with this problem in the short term is to explicitly apply system colors to the SVG parts in forced colors modes. In this case, we would use the LinkText system color:

View the Pen Forced Colors: Simple SVG Demo [CurrentColor Temporary Fix] by Melanie Richards (@somelaniesaid) on CodePen.

CurrentColor SVG in forced colors modes (3)

So, this works, but it’s certainly not as convenient as using currentColor and having the right color propagate automatically across color modes.

Thankfully, Amelia Bellamy-Royds brought up the issue again, and the CSS WG arrived at a solution to restore this common currentColor technique and heal currently-broken experiences. The spec now defines a preserve-parent-color keyword value for forced-color-adjust:

In forced colors mode, if the color property inherits from its parent (i.e. there is no cascaded value or the cascaded value is currentColor, inherit, or another keyword that inherits from the parent), then it computes to the used color of its parent’s color value.

In all other respects, behaves the same as none.

Because currentColor inherits the used color in this case, and forced colors are applied at used value time, it would now inherit the parent’s forced system color value.

This is effectively a direct fix for ensuring that SVG parts with currentColor inherit the correct user-defined system color in forced colors modes. Web developers would not need to use this keyword directly, as it will be applied to SVGs by default in the user agent stylesheet:

@namespace "http://www.w3.org/2000/svg";svg|svg { forced-color-adjust: preserve-parent-color; }svg|foreignObject { forced-color-adjust: auto; }

This replaces a user agent stylesheet rule where forced-color-adjust is set to none on SVGs.

Once this change lands, web developers should be able to use the currentColor technique once again to their hearts’ content (perhaps keeping the explicit system colors around for a bit, for compat on 2021 browser versions). At time of writing, this patch is in active development in the Chromium code base, so my hope is that this all resolves soon. In the meantime, use system color keywords for SVG parts in forced colors modes, and thank you for testing in Windows High Contrast! 🖤

Responses

My blog uses Webmentions. Responses from sites which likewise support Webmentions, such as Twitter or people’s personal sites, will show up here.

  • CurrentColor SVG in forced colors modes (4)

    Hidde on

    “If you’ve tried to use this technique in the past few months and found that your SVG appeared “broken” in Windows High Contrast mode on Chromium-based browsers (…) don’t worry—you are not imagining things.”—@soMelanieSaid melanie-richards.com/blog/currentco…

  • CurrentColor SVG in forced colors modes (5)

    Reply from Sara Soueidan on

    Yep I've come across this a while back and updated course content to use canvasText for a demo I had. CSS system keywords are more reliable for this kind of "theming" anyway.

  • CurrentColor SVG in forced colors modes (6)

    Reply from JulieG on

    Thankyou so much - I was starting to think I’d just dreamed that currentColor used to behave well!

  • CurrentColor SVG in forced colors modes (7)

    Adrian Roselli 🗯 on

    Looks like I have a post to update.

  • CurrentColor SVG in forced colors modes (8)

    Reply from Heather on

    This is very helpful! Thank you for writing it up. 🙂

  • CurrentColor SVG in forced colors modes (9)

    Pablo Lara H on

    CurrentColor SVG in forced colors modes by Melanie Richards @soMelanieSaid #css #SVG #currentColor #webdev melanie-richards.com/blog/currentco…

  • CurrentColor SVG in forced colors modes (10)

    Reply from Melanie Richards on

    Of course! Realized from our discussion the other day that this is probably a good one to capture top-to-bottom in a post, so thanks for the discussion!

  • CurrentColor SVG in forced colors modes (11)

    Reply from Heather on

    It’s very helpful to understand what changed and how it is being fixed. Also, I’m super glad to not have to try to explain this since you wrote up the whole issue! 🙂You’ll be getting a should out in my web directions preso and latest article on a11y svgs. 💯

  • CurrentColor SVG in forced colors modes (12)

    Reply from Melanie Richards on

    Having a resource to point to is my goal for blogging! Thanks for the kind words and glad the post is helpful 😊

  • CurrentColor SVG in forced colors modes (13)

    Adrian Roselli 🗯 on

    I *finally* added @soMelanieSaid’s post on SVG & WHCM to my WHCM post as an update: adrianroselli.com/2021/02/whcm-a…But go read her full post:“CurrentColor SVG in forced colors modes”melanie-richards.com/blog/currentco…I look forward to the fix.

  • CurrentColor SVG in forced colors modes (14)

    Adrian Roselli 🗯 on

    Thanks to a poke by @stevefaulkner about WHCM and SVGs in my post:adrianroselli.com/2021/02/whcm-a…I was reminded of @soMelanieSaid’s October post, “CurrentColor SVG in forced colors modes”:melanie-richards.com/blog/currentco…For the short term, use system color keywords ov…

  • CurrentColor SVG in forced colors modes (15)

    The A11Y Project on

    "If you’ve tried to use this technique in the past few months and found that your SVG appeared “broken” in Windows High Contrast mode on Chromium-based browsers, don’t worry—you are not imagining things." @soMelanieSaid melanie-richards.com/blog/currentco…

  • CurrentColor SVG in forced colors modes (16)

    Sara Soueidan on

    Looks like a temporary fix for the SVG currentColor issue in High Contrast modes has recently shipped: bugs.chromium.org/p/chromium/iss…This was the issue: melanie-richards.com/blog/currentco…Just tested in Chrome 103 on Windows 10: currentColor works as expected. I hope I'm …

  • CurrentColor SVG in forced colors modes (17)

    Reply from Adrian Roselli 🗯 on

    Have not tested in a few months, but…“CurrentColor SVG in forced colors modes”melanie-richards.com/blog/currentco…The April 2022 fix is ‘temporary’:bugs.chromium.org/p/chromium/iss…I encourage you to test and see if/how this still applies (from October 2021).

Top Articles

Latest Posts

Article information

Author: Roderick King

Last Updated: 10/25/2022

Views: 6269

Rating: 4 / 5 (71 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Roderick King

Birthday: 1997-10-09

Address: 3782 Madge Knoll, East Dudley, MA 63913

Phone: +2521695290067

Job: Customer Sales Coordinator

Hobby: Gunsmithing, Embroidery, Parkour, Kitesurfing, Rock climbing, Sand art, Beekeeping

Introduction: My name is Roderick King, I am a cute, splendid, excited, perfect, gentle, funny, vivacious person who loves writing and wants to share my knowledge and understanding with you.