SVG and High Contrast Mode
Windows High Contrast Mode overrides colors aggressively — SVGs need specific handling to stay visible and meaningful.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How High Contrast Mode Breaks SVG
High Contrast Mode (and the modern `forced-colors` CSS media feature) strips custom colors and forces a limited system palette — SVG fills and strokes set via CSS often disappear entirely if not handled, since the mode assumes standard HTML elements more readily than embedded vector graphics.
- Forced-colors mode strips custom fill/stroke colors by default
- SVGs can become invisible or lose meaning if unhandled
- This disproportionately affects low-vision users who rely on the mode
Fixing SVG for Forced Colors
Use the `forced-colors` media query to apply CSS system colors (`CanvasText`, `ButtonText`) explicitly to SVG fills/strokes, and add `forced-color-adjust: none` selectively on SVGs where you need to preserve specific custom colors that carry real meaning (like a red error icon).
- @media (forced-colors: active) applies system color keywords
- CanvasText and ButtonText map SVG colors to the user's chosen theme
- forced-color-adjust: none preserves meaningful custom colors selectively
Frequently Asked Questions
How do I test my SVG icons in Windows High Contrast Mode?
Enable it in Windows Settings (Accessibility > Contrast themes) or use Chrome DevTools' forced-colors emulation in the Rendering panel to preview the effect without switching your whole OS display.
Should every SVG respect forced-colors overrides?
Most should, to stay legible for the users who rely on the mode — but icons where color itself carries essential meaning (a red 'stop' icon) may warrant forced-color-adjust: none to preserve that meaning intentionally.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG