forced-colors是CSS媒体查询，检测系统是否已强制重绘页面颜色；而prefers-contrast仅表示用户偏好信号。前者反映实际生效状态，后者仅为意向，二者不可混用，应分别用于兜底强化与渐进增强。
什么是:forced-colors，它和prefers-contrast有什么区别
:forced-colors是CSS Level 5新增的媒体查询，用于检测系统是否**强制重绘了页面颜色**（比如Windows高对比度模式、macOS“增加对比度”+“使用灰度”组合开启时）。它不是判断“用户偏好”，而是确认浏览器**已接管并替换了你的color/background-color等声明**——此时你写的color: #007bff可能已被系统换成HighlightText，background-color: #f8f9fa可能被抹成纯白或纯黑。
它和prefers-contrast: high关键差异在于：前者是“已生效”的事实状态，后者只是“用户开了开关”的意向信号。实际中，:forced-colors更可靠，尤其在Edge/Chrome最新版（120+）和Safari 17.4+中已稳定支持；而旧版Safari对prefers-contrast支持不全，且部分Android WebView根本不触发该查询。
常见错误是混用两者做同一逻辑判断，导致样式重复覆盖或冲突。正确做法是：用@media (forced-colors: active)做兜底强化，用@media (prefers-contrast: high)做渐进增强。
在:forced-colors: active下哪些CSS属性会被忽略
当系统启用强制配色时，以下属性**直接失效**，浏览器会用系统定义的颜色替代：
-
color→ 替换为CanvasText或ButtonFace等系统语义色 -
background-color→ 替换为Canvas、ButtonFace等 -
border-color（仅当border-style非none且未显式设border-color时才可能被接管） -
outline-color、box-shadow、text-shadow、opacity、filter—— 全部被清空或降级
但这些属性仍可控：
-
border（简写，含style+width）→ 可保留，系统只换color部分 -
outline（简写）→ 同上，且outline-offset完全有效 -
fill、stroke（SVG内联属性）→ 仍可设，但需用系统色关键词如Highlight -
forced-color-adjust: none→ 可局部禁用强制配色（慎用，破坏无障碍）
怎么写真正有效的高对比度专用规则
核心原则：放弃靠颜色区分，改用**形状、轮廓、间距、文字装饰**传递信息。例如按钮焦点态不能只加box-shadow，得用双层outline + border组合。
实操建议：
- 所有交互元素（
button、a、input）必须有明确outline，宽度≥2px，outline-offset设1–2px避免贴边 - 链接默认无下划线？在
:forced-colors里强制加上：a:not(:focus) { text-decoration: underline; } - 禁用
rgba()、hsl()半透色，全部改用系统色关键词：Canvas、ButtonFace、Highlight、GrayText - 图标用SVG而非PNG，
fill设为currentColor或系统色，确保随文字色同步变化 - 避免
background-image，它在强制配色下常被丢弃；若必须用，加@supports (forced-colors: active) { background-image: none; }降级
示例（按钮焦点）：
@media (forced-colors: active) {
button:focus {
outline: 3px solid Highlight;
outline-offset: 2px;
border: 2px solid Highlight;
background-color: Canvas; /* 显式重置，防止继承异常 */
}
}
如何测试:forced-colors效果而不依赖真实系统设置
现代浏览器开发者工具已内置模拟开关：
- Chrome/Edge：DevTools → ⚙️ Settings → Preferences → Accessibility → 勾选“Emulate forced colors”，下拉选
active - Safari：Develop → Enter Forced Colors Mode（需先开启Develop菜单）
- Firefox：暂不支持模拟，但可在Windows/macOS原生高对比度环境下真机验证
容易踩的坑：
- 只在
body上测，漏掉iframe子页面——每个上下文需单独触发 - 用
display: none隐藏元素后又想在:forced-colors里显示，结果失效——display优先级高于媒体查询，应改用visibility: hidden或opacity: 0 - 误以为
forced-colors会自动适配暗色模式——它和prefers-color-scheme完全正交，可能同时出现dark+forced-colors: active，此时系统色值（如Canvas）含义会变，需额外校验
最常被忽略的一点：强制配色模式下，currentColor不再是你定义的color值，而是系统当前文本色（如CanvasText），所以所有依赖currentColor的SVG或伪元素，必须在:forced-colors块内重新声明fill/color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
