CSS 高对比模式：prefers-contrast 与 forced-colors

---

title: CSS 高对比模式：prefers-contrast 与 forced-colors

keywords:

• prefers-contrast
• forced-colors
• 高对比
• 无障碍
• 主题适配

description: 说明高对比模式相关的媒体查询，适配操作系统或浏览器的强制色彩方案，优化文本对比与控件可见性，提供示例与建议。

categories:

• 文章资讯
• 编程技术

---

概述

prefers-contrast 指示用户偏好更高或更低对比；forced-colors 表示系统启用强制色彩模式（如 Windows 高对比）。站点应在这些模式下提高可读性并避免依赖背景图像的可见信息。

示例

@media (prefers-contrast: more) { :root { --border: 2px } .btn { outline: var(--border) solid currentColor } }
@media (forced-colors: active) { .icon { forced-color-adjust: none } }

工程建议

• 语义与结构：通过语义化 HTML 与可访问控件减少对颜色的依赖；确保焦点可见。
• 图标与装饰：在 forced-colors 下使用 forced-color-adjust 控制渲染；避免丢失信息。
• 测试：在不同平台启用高对比模式验证对比度与可达性。

参考与验证

• MDN forced-colors 文档：https://developer.mozilla.org/docs/Web/CSS/forced-colors
• MDN prefers-contrast 文档：https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast
• web.dev 无障碍对比指南：https://web.dev/articles/color-contrast