SVG and prefers-contrast
prefers-contrast detects a user's OS-level high contrast preference, letting SVG styling adapt for better visibility.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Detecting High Contrast Preferences
The prefers-contrast media query detects when a user's operating system is set to a more or less contrast preference than default, and wrapping SVG-specific style overrides in @media (prefers-contrast: more) lets a design increase stroke width, boost color contrast ratios, or simplify overly subtle gradient fills specifically for users who've requested that accommodation.
- prefers-contrast: more detects a user's OS-level higher contrast preference
- SVG overrides can increase stroke width or boost color contrast ratios
- Can also simplify subtle gradients that reduce contrast for affected users
Practical Adjustments for High Contrast SVG Icons
Common high-contrast SVG adjustments include increasing an icon's stroke-width, swapping a subtle two-tone fill for a single bolder color, and ensuring any thin decorative lines meet a higher minimum contrast ratio against their background, all scoped specifically within the prefers-contrast media query so default rendering remains unaffected for other users.
- Increasing stroke-width improves icon visibility for high-contrast users
- Swapping subtle two-tone fills for a bolder single color aids legibility
- Adjustments stay scoped to the media query, leaving default rendering unaffected
Frequently Asked Questions
Is prefers-contrast the same as forced-colors mode?
No, they're related but distinct — prefers-contrast detects a general contrast preference for a design to respond to with its own styling, while forced-colors mode is a stricter OS-driven override that replaces colors entirely, often used with Windows High Contrast mode.
Should every SVG icon have prefers-contrast adjustments?
Not necessarily every icon — it's most valuable for icons or illustrations relying on subtle color distinctions or thin strokes that could genuinely become hard to see for users who've requested higher contrast.
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