High-Contrast Mode

[tigt]

While styles for Windows High-Contrast Mode are currently behind -ms- prefixes, that’s worth overlooking to better serve HCM users.

Browser support/considerations

• IE and old Edge support the -ms-high-contrast media feature and the -ms-high-contrast-adjust property
• Notably, IE ignores background-image, but Edge recognized abuse of backgrounds for content led to a worse user experience, so it does something fancier.
• Firefox supports HCM, but doesn’t perfectly inherit high-contrast colors from the Windows settings (maybe just hyperlinks?). Some configuration of the user-agent styles in settings is required. It doesn’t have a media query to target HCM, but improvements can still be made with CSS.
• Edgium and its intent to ship HCM support in Chromium may lead to standardized high-contrast CSS.

Proposed global HCM styles

At work, testing HCM revealed some styles worth applying globally, presumably oversights in IE/Edge:

@media (-ms-high-contrast: active) {
  *, ::before, ::after {
    border-image: none !important; /* falls back to border-style */
    list-style-image: none !important; /* falls back to list-style-type */
  }
}

There’s also arguments for resetting properties like filter and mix-blend-mode, but those are harder to reason about. IE/old Edge don’t support them on HTML content except in corner cases like <foreignObject> — but Edgium will.

Newer HTML5 elements could use assigned HCM colors, as some permutations of Windows, IE/Edge version, and HTML5 features can lead to visibility problems:

• <mark> in Windows 8 seems to have its color still be #000, requiring color: inherit or similar

• Beyond that bug, <mark> doesn’t render usefully in HCM, as its recommended styling is mostly background-color. An indicator can be restored in IE, Edge, and Firefox with:

  mark {
    box-sizing: border-box;
    border: 1px dotted transparent;
  }
  

  This renders nothing normally — but when HCM forces border-color: currentColor, it shows.

• Newer form-associated elements sometimes need attention: <meter>, <input type="range">, and <progress>, off the top of my head.

[fuzzbomb]

mark {
  box-sizing: border-box;
  border: 1px dotted transparent;
}

This is VERY likely to be confused with the default focus style in Firefox + IE, which is a 1px dotted outline.

Moreover, a 1px dotted transparent outline (or border) is a commonly-used fallback method to provide a focus style in HCM, in designs which use a box-shadow as a focus style in the full-colour space. The box-shadow is stripped out in HCM, but the transparent outline becomes visible in HCM. I wrote about the approach at CSS box-shadow vs outline.

I recommend we avoid using this approach for <mark>