SVG in Forced Colors Mode
The forced-colors media feature is the modern, standardized successor to vendor-specific high-contrast detection — here's how to use it for SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Understanding forced-colors
`@media (forced-colors: active)` detects when the OS is applying a forced, limited color palette (accessibility high-contrast modes) — inside this query, use CSS system color keywords (`CanvasText`, `LinkText`, `ButtonFace`) rather than custom hex values, since the browser will map these to the user's actual chosen theme colors.
- forced-colors: active detects OS-level forced color palettes
- System color keywords adapt automatically to the user's theme
- Custom hex colors get overridden regardless, so use keywords intentionally
The forced-color-adjust Property
`forced-color-adjust: none` opts a specific element out of forced-color overriding, preserving its authored colors — use this sparingly and only where color conveys essential meaning (a colored status indicator), since overuse defeats the accessibility purpose forced-colors mode serves.
- forced-color-adjust: none preserves original authored colors
- Reserve it for elements where color carries essential meaning
- Overusing it undermines the accessibility benefit for affected users
Frequently Asked Questions
What's the difference between forced-colors and prefers-contrast?
forced-colors detects an active OS-level color-replacement mode (Windows High Contrast); prefers-contrast detects a general user preference for more contrast without necessarily replacing colors — they address related but distinct accessibility needs.
Which system color keywords are available?
CanvasText, Canvas, LinkText, ButtonText, ButtonFace, Highlight, and several others defined in the CSS Color Adjustment spec — each maps to the user's actual chosen system theme color for that semantic role.
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