Both common of those common custom :focus styles will be invisible in WCHM.
Windows High Contrast Mode wantonly ignores border or background color changes and box shadows. Custom focus styles + a transparent outline However, there are often very simple solutions to most high contrast mode issues: 1.
If the heavy-handed nature of WHCM color overrides makes bugs seem daunting or out of your control, you're not alone. Just as a role="button" will not apply the element's default browser styles, it will also not affect WHCM styles. Screen readers will read a as a button, but to WHCM it remains a link and receives link colors. WHCM also cares not for your ARIA roles, states, or properties. 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). Colors on websites viewed in WHCM are determined solely based on HTML element, CSS property, and certain states (e.g. WHCM, in contrast, will completely ignore the authored background color. 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.Ī 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. Windows High Contrast Mode behavior can be a bit of a surprise if you haven't already spent time studying its ways.