Quick Tips for High Contrast Mode

Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.

CC

Chris CoyierCSS-Tricks

·June 26, 2020·Links

A Quick Win for Windows High Contrast Mode Focus Styles

Windows High Contrast Mode (WHCM) can undermine carefully designed focus indicators. Sarah Higley has a clever CSS workaround for this common pain point.

The key move: instead of killing default browser focus outlines with outline: none, switch to outline 3px solid transparent. Browsers ignore that transparent outline outside WHCM, but the mode overrides it into a thick white border—giving you a strong, visible focus state without extra code.