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

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