WHCM and System Colors | Adrian Roselli

WHCM and System Colors

February 10, 2021; 2 Comments

Outline:

• Feature Queries
  • Proprietary, or Internet Explorer Only
  • Standards Track, or Edge Only
  • Frankenquery’s Monster
• System Colors
  • CSS2 System Color Keywords
    • WHCM Proprietary Feature Query Color Mappings
  • CSS4 System Color Keywords
• Browser Support
  • Internet Explorer
  • Legacy Edge (Ledgacy)
  • Chromium Edge (Chromiedge)
  • Firefox
  • Chrome
• Examples
  • Backgrounds
  • Inline SVGs
  • SVGs via <img>s
  • Form Fields
  • Custom Controls
  • Collected Examples
• Wrap-up
• References

There is a ton of prior content discussing Windows High Contrast Mode (WHCM) and web content. The catch is that content covers four (five?) different implementations across more than a decade of support: Internet Explorer, Edge, the other Edge, Edge plus IE aliasing, and hardly anything on Firefox. Which means much of it no longer applies.

The best overview of the current situation is from Microsoft: Styling for Windows high contrast with new standards for forced colors, posted mid-September 2020. As the standards process moves forward and Edge continues to update, expect this overview to be updated (or point to updates).

That post covers the basics of the feature (I do not). Because I want you to try my examples, this is how to activate WHCM:

• Start → Settings → Ease of Access → High contrast, then “Turn on high contrast”, then “Choose a theme” (if you want to try variations)
• Alt + left Shift + Print Screen (activates the last-used theme)

Please remember [...]