gotchajavascriptModerate
High contrast mode — Windows forced colors and CSS adaptations
Viewed 0 times
CSS Color Adjustment Level 1, Windows 10+
high contrast modeforced colorswindows accessibilityCSS forced-colorssystem colors
windows
Problem
Windows High Contrast Mode (now Forced Colors Mode) overrides CSS colors with OS-defined system colors. Elements relying on background-color, box-shadow, or background-image for visual cues become invisible.
Solution
Test in Windows Forced Colors Mode and use CSS forced-colors media query to adapt UI.
// Detect forced colors
@media (forced-colors: active) {
/ OS controls most colors — only override when necessary /
.custom-checkbox {
/ background replaced by system — use border or outline for visibility /
border: 2px solid ButtonText;
forced-color-adjust: none; / opt out of override for this element /
}
/ SVG icons can disappear — add a stroke /
svg {
stroke: currentColor;
fill: currentColor;
}
/ Focus rings must use an OS-safe property /
:focus-visible {
outline: 2px solid Highlight;
}
}
// Detect forced colors
@media (forced-colors: active) {
/ OS controls most colors — only override when necessary /
.custom-checkbox {
/ background replaced by system — use border or outline for visibility /
border: 2px solid ButtonText;
forced-color-adjust: none; / opt out of override for this element /
}
/ SVG icons can disappear — add a stroke /
svg {
stroke: currentColor;
fill: currentColor;
}
/ Focus rings must use an OS-safe property /
:focus-visible {
outline: 2px solid Highlight;
}
}
Why
Approximately 30% of Windows screen reader users also use High Contrast Mode. CSS background-color and box-shadow are stripped entirely by the OS, so components that rely on them solely for visual differentiation become indistinguishable.
Gotchas
- box-shadow is removed in forced colors mode — do not use it as the only focus indicator
- background-image (including gradients) is removed — icon buttons with background-image icons become empty
- Use SystemColor keywords (ButtonText, Canvas, Highlight, GrayText) for safe color choices
- forced-color-adjust: none preserves your custom colors but disables OS protection — use sparingly
Context
Windows users with High Contrast Mode enabled; approximately 1 in 20 Windows users
Revisions (0)
No revisions yet.