Quick Tips for High Contrast Mode
May 26, 2020
Windows High Contrast Mode behavior can be a bit of a surprise if you haven’t already spent time studying its ways. Unlike other operating system display modes that invert colors or set a dark mode flag, Windows High Contrast Mode (WHCM) completely overrides authored colors with user-set colors.
A mode like invert colors will take author-set colors and transform them, which allows something like an authored background change on hover to still happen, albeit with different colors than originally defined. WHCM, in contrast, will completely ignore the authored background color. Colors on websites viewed in WHCM are determined solely based on HTML element, CSS property, and certain states (e.g. disabled). While authors still control things like whether a border exists and outline width, the colors themselves will be overridden (at least without a high contrast mode media query, covered below).
WHCM also cares not for your ARIA roles, states, or properties. Screen readers will read a <a role="button"> as a button, but to WHCM it remains a link and receives link colors. Just as a role="button" will not apply the <button> element’s default browser styles, it will also not affect WHCM styles.
If the [...]