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.
Here’s the first trick:
[…] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states, there’s a very simple fix. Instead of overriding default browser focus styles with
outline: none
, make it transparent instead:outline 3px solid transparent
.
That will essentially do nothing outside of WHCM, but in WHCM, it will be a thick white border, which is a strong, good visual focus style.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/button-focus-outline-whcm.png?resize=899%2C499&ssl=1)