SVG Filtering for Windows High Contrast Mode

Two nearly back-to-back tweets this weekend reminded me that you can use CSS filters to mess with the colors of SVGs:

Generally this technique is not something you would consider for its potential accessibility benefits (though I do just that in my Invert Page bookmarklet). But if we look at how we can leverage this for Windows High Contrast Mode (WHCM), then some options open up to us.

This technique leans on two other features:

In cases where you have a dark-colored line-art SVG (or perhaps light-colored depending on the WHCM mode), you can write a media query to invert the image, whether the image comes from an <img> element or from CSS. If the latter, you may need to unvert the other content, as I do in the example.

If you have full-color art, you can use the same media query to increase the contrast instead — after all, we can generally assume the user wants more contrast. Note that some users choose to use WHCM to decrease contrast by choosing custom colors, and we cannot detect that. In the example, the Mozilla logo appears as both an <img> and CSS background.

The example below shows the code in action (you can visit it directly at CodePen):

See the Pen Filtering for WHCM by Adrian Roselli (@aardrian) on CodePen.

Note the example is probably simplified compared to your own needs, but hopefully there is enough in there for you to adapt as appropriate.

The following images show how the example is rendered by default in Edge, and then in each default option for Windows High Contrast Mode. In addition to the line art inversions, note how the contrast in that Mozilla logo is pushed (to a bit of an extreme)

Example with no WHCM.
The embedded example without WHCM.
Example with WHCM white-on-black setting.
The example in Edge with WHCM active.
Example with WHCM black-on-white setting.
The example in Edge with WHCM active using the black on white setting.
Example with WHCM white-on-black setting.
The example in Edge with WHCM active using the white on black setting.

One Comment

Reply

I was mwssing around with this kimd of thing recently but hadn’t thought to use the contrast filter. I like how this works with the different WHC modes. Cheers.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>