Windows High Contrast Mode and the CSS forced-colors media feature exist for users who need extreme contrast to use their computer at all. Most products break entirely under these settings because they use background images, custom colors, and box shadows that the OS overrides.
How Forced Colors Works
When forced colors is active, the OS replaces all CSS colors with a small palette of system colors. Backgrounds become Canvas. Text becomes CanvasText. Interactive elements use ButtonFace and ButtonText. Any color not in this palette is replaced.
The problems this causes:
- Icon buttons with SVG icons lose their visible state (hover, focus, active)
- Custom checkboxes and radio buttons become invisible
- Cards that use box shadows for elevation become flat and indistinguishable
- Focus indicators implemented with box-shadow disappear
The Fixes
@media (forced-colors: active) {
/* Restore borders that box-shadow was providing */
.card {
border: 1px solid ButtonText;
}
/* Ensure SVG icons inherit forced color */
svg {
fill: currentColor;
}
/* Use outline instead of box-shadow for focus */
:focus-visible {
outline: 2px solid ButtonText;
box-shadow: none;
}
}
The Outcome
The product now passes manual testing under Windows High Contrast Mode in both light and dark variants. Users who depend on forced colors can complete all primary workflows without workarounds.