This is just a quick primer on how Windows High Contrast Mode (HCM) works. It is not exhaustive, but should give you a base understanding. Basically, text, border and background colors are replaced. They are not removed, which is a pretty common misconception.
Colors
At a very simple level, High Contrast Mode replaces all of the color definitions with the system defined colors. High Contrast Mode places the control over the colors that are displayed to the user in their hands. They decide
Borders
All borders are exposed in a high contrast color when the user turns on high contrast mode. This includes borders that were transparent. If CSS opacity or a color value with an alpha channel is used, then the border that was formerly hidden or a light color would now be a high contrast color.
That’s important to know since many frameworks use opacity: 0 or a transparent color to hide borders. The only way to hide a border in High Contrast Mode is to use border:none (or don’t define a border).
Text
The color of the text that we use will be overridden by HCM. This is completely configurable by the user. Links, buttons and body text all have a unique color.
Considering this, never use color as a means to distinguish an element or action. For instance, if required elements or warnings are only in red, then users in high contrast mode will not receive this visual information.
Backgrounds
All CSS backgrounds are removed in HCM. There should never be any information provided only in background images that is important to interact with or understand the website.
Images
Images are not changed in HCM. This means that if you are using a transparent PNG or SVG for a button or interactive element, those images may not show up for the user. It is important to only use transparent images for interactive content when they are accompanied by a text equivalent or there is another redundant means to complete the action on the webpage.
Conclusion
Hope this helps! Turn on your high contrast mode and play around with it and TEST, test, test!