Forced Colors 与高对比支持

大理论

高对比支持是一种用户控制的渲染契约，不是给页面再做一个深色主题。prefers-contrast 表示用户希望更高或更低对比；forced-colors: active 表示浏览器/系统可能在 paint 阶段把作者颜色替换成系统颜色。设计系统必须让语义、状态和焦点在这种替换之后仍然成立。

小知识点

1. forced-colors 会影响 text color、background、border、outline、SVG fill/stroke 等颜色属性。
2. box-shadow 和 text-shadow 在 forced colors 中可能被强制为 none，非 URL 背景图也可能被移除。
3. Canvas、CanvasText、ButtonFace、ButtonText、Highlight、HighlightText 等系统颜色比硬编码品牌色更可靠。
4. forced-color-adjust: none 只适合非常受控的小范围例外，例如必须保留几何语义的自绘图标；不要全局关闭用户高对比设置。
5. 焦点、选中、错误、禁用和图表状态不能只靠色相；需要 outline、边框、文字、图标、形状、线型或 pattern 冗余。
6. WCAG Non-text Contrast 和 Focus Appearance 都要求组件边界、焦点指示和相邻颜色关系可辨，而不是只检查正文文字。

设计判断

如果关闭作者颜色后，按钮边界、输入框、选中项、错误状态、链接、焦点环和 SVG 图标仍能被识别，这套 UI 才具备高对比韧性。如果焦点只是一层 glow，或状态只是一块品牌背景色，它会在 forced colors 下消失或失真。

实现建议

为组件写高对比状态表：default、hover、focus-visible、active、selected、disabled、error、loading。CSS 中使用真实 outline 和 outline-offset，保留 border 作为边界，SVG 使用 currentColor 或系统色，避免把关键状态放在 box-shadow/background-image 里。用浏览器 DevTools 或系统设置分别验证 forced-colors: active、prefers-contrast: more、键盘 Tab 顺序和 200% zoom。

反例/风险

把 dark mode 当高对比、全局设置 forced-color-adjust: none、移除 outline 后只用 shadow 做焦点、红绿状态没有文字或图标、用透明 border 预留焦点但在 forced colors 下变成不可预期边框、自绘 SVG 没有 currentColor 或 label。

案例分析

MDN 的 forced-colors 说明强调颜色会在绘制阶段被强制为系统调色板，且阴影和非 URL 背景图会被移除；WCAG 2.2 的 Non-text Contrast 与 Focus Appearance 则把焦点指示、组件边界和相邻颜色差异纳入判断。可学习点是：高对比设计应从组件状态和系统颜色开始，而不是从品牌配色开始。

来源链接

MDN prefers-contrast: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-contrast MDN forced-colors: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/forced-colors WCAG 2.2 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html WCAG 2.2 Focus Appearance: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html