CSS 41 💻 prefers-color scheme and prefers-contrast media features

a - prefers-color-scheme media feature
prefers-color-scheme media feature detects the user's preferred color scheme  light or dark
It is useful for creating for accessible and personalized experience across different devices
values: light → user prefers light theme or has not expressed a preference
dark → user prefers a dark theme
@media (prefers-color-scheme: dark) { } → applies styles for dark preference
@media (prefers-color-scheme: light) { } → applies styles for light preference

b - prefers-contrast media feature
prefers-contrast media feature detects the user's preferred contrast level
This is useful for accessibility ensuring that content is legible regarding system's color scheme or brightness settings
values: no-preference → no user preference
more → user's preference is a higher level of contrast
less → user's preference is a lower level of contrast
custom → user uses a specific set of colors and contrast
@media (prefers-contrast: more) { } → applies styles for more contrast preference
@media (prefers-contrast: less) { } → applies styles for less contrast preference

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!