Three ways of showing an SVG. Do any of these show up in Windows High Contrast Mode in IE11/Edge/others? The SVG contains its own style
block, and instead of an explicit color value it defines stroke: currentColor
which inherits it from the current context's foreground color. This colour is automatically changed when switching into Windows High Contrast Mode, meaning that this SVG will adapt correctly to whatever color/contrast mode (including custom modes) the user has set. In addition, the icon is set to opacity: 0.5
, but is changed to opacity: 1
if -ms-high-contrast: active
.
Note that in Firefox, you need to hard refresh (SHIFT+refresh) after changing into/out of WHCM, as the currentColor
seems to be cached somehow persistently even when refreshing. Also, opacity
doesn't seem to apply to SVG-based CSS backgrounds.