四个 CSS 媒体查询接住用户的系统偏好
来源：fleeb.ee — 2025-06-29
📋 概述
无障碍经常是设计做完之后才想起的事，而 CSS 里已经有一组由系统设置触发的媒体查询，不必推翻配色重做。文章给出四个可直接照抄的写法：prefers-contrast 在用户要求高对比时加深文字颜色；prefers-reduced-motion 关掉非必要动画，也可以一刀切禁掉全部 animation 与 transition；prefers-color-scheme 配合 CSS 变量或新的 light-dark() 只写一次就支持明暗；prefers-reduced-transparency 把半透明层改成不透明，但它在 Firefox 与 Safari 尚未默认支持。
🔑 核心要点
- prefers-contrast: more 把 rgb(117,105,255) 换成 rgb(44,0,255)，保留原设计的同时给需要的人更高对比
- WCAG 建议正文对比度至少 4.5、大字号至少 3.0，DevTools 里点颜色就能看到对比度
- 减少动效有两种颗粒度：只关掉 hover 的 jello 动画，或整页 animation/transition 全部 none，后者要做副作用回归检查
- 2024 年起可用 color-scheme 加 light-dark() 一行定义两套色，还顺带让滚动条与选中色跟着变
- prefers-reduced-transparency 仍是实验特性，支持度不明时应保守使用半透明
💡 金句
These media queries are no silver bullet, but they can come in handy when you need some more flexibility in a pinch.
👍 0
👎 0
← 返回 Lobsters 首页