---

title: CSS可访问性：prefers-reduced-motion与对比度治理

keywords:

• prefers-reduced-motion
• 对比度
• 可访问性
• WCAG
• 动画

description: 利用媒体查询与设计规范降低动画与提升对比度，兼顾不同用户需求并符合可访问性标准。

categories:

• 文章资讯
• 编程技术

---

CSS可访问性：prefers-reduced-motion与对比度治理

概览

• 使用 prefers-reduced-motion 为对动画敏感用户降级；提升文本与组件对比度满足 WCAG。

技术参数（已验证）

• 媒体查询：@media (prefers-reduced-motion: reduce) 禁用或简化动画；提供替代交互。
• 对比度：遵循 WCAG 2.1 AA（普通文本 4.5:1；大文本 3:1）；记录主题与模式。
• 可访问性：为动画提供可控与跳过选项；避免闪烁与诱发不适效果。
• 兼容：现代浏览器支持良好；旧环境提供设置入口与类名策略。
• 观测：RUM 收集用户偏好与体验指标；持续优化。

实战清单

• 建立动效降级与对比度基线；在设计系统中固化。
• 在构建中进行可访问性校验；在产品中提供设置入口。
• 监控用户反馈与指标；迭代改进。