<aside> 💡 ~4% of Windows users run Contrast Themes (formerly "High Contrast Mode"). When active, the OS overrides all colours with a limited system palette. Components that rely on colour for meaning, box-shadow for focus, or background images for icons can become invisible.

</aside>

How forced colours work

• The browser replaces almost all author-defined colours with system colours (Canvas, CanvasText, LinkText, ButtonFace, Highlight, etc.)
• background-color, color, border-color, outline-color, box-shadow, text-shadow are all overridden
• background-image is removed UNLESS it uses a system colour or is specifically preserved
• SVG fill and stroke are overridden to CanvasText or currentColor
• Media query: @media (forced-colors: active) { ... } detects this mode

🎨 Designer checklist

• Don't convey information by colour alone — always pair with text, icons, or patterns
• Focus indicators should use outline (not just box-shadow) — box-shadow disappears in forced colours
• Borders are preserved — use visible borders on interactive elements, not just background colour changes
• Selected/active states need a visible indicator beyond background colour (e.g. a border or underline)
• Custom icons using background-image or CSS masks may disappear — provide an alternative

💻 Developer checklist

Focus indicators

• Always use outline for focus styles, not box-shadow alone. outline is preserved in forced colours; box-shadow is stripped
• If you need a thick focus ring: use outline + outline-offset. Example: outline: 3px solid transparent; (invisible normally) becomes visible in forced colours because the browser replaces transparent with the system highlight colour
• For custom focus on dark backgrounds: set outline-color: currentColor (adapts to both modes)