必须用canvastext、buttonface等系统色关键词，因高对比度下#000、rgb(0,0,0)等硬编码色被浏览器强制忽略；这是规范行为，非bug。
为什么不能用 #000 或 rgb(0, 0, 0) 表示高对比度下的“黑色”
系统启用高对比度后，浏览器会强制替换你写的任何颜色值——#000、rgb(0, 0, 0)、甚至 hsl(0 0% 0%) 全部失效。这不是 bug，而是规范行为：color 和 background-color 属性被接管，只认语义化关键字。
常见错误现象：按钮文字在高对比模式下突然看不见，或背景变成一片纯白/纯黑而失去层次感。根本原因是用了硬编码颜色，没切换到系统色关键词。
- 必须改用
CanvasText（正文文字）、ButtonFace（按钮背景）、ButtonText（按钮文字）等系统定义色 -
Highlight+HighlightText是警告/选中区域的黄金组合 - 避免
transparent，它在 forced-colors 下可能被映射为不可见色；改用Canvas或ButtonFace显式声明底色
@media (forced-colors: active) 里怎么写 color 才生效
写了 @media (forced-colors: active)，但 color: #333 还是没变？因为该媒体查询生效时，所有非系统色关键词都会被忽略。你得主动重写，而不是覆盖。
实操建议：
- 按钮文字统一设为
color: ButtonText，别依赖继承或默认值 - 链接文字用
color: LinkText（不是blue），悬停态加text-decoration: underline强化识别 - 禁用
text-shadow和opacity，它们在 forced-colors 下直接清空 - 对
svg内部fill，必须用系统色关键词（如fill: CanvasText），否则会被映射成灰调
哪些系统色关键词可用，哪些容易踩坑
W3C 定义了 12 个标准系统色关键词，但浏览器实际支持有差异。Chrome/Edge/Firefox 支持较全，Safari 17.4+ 开始支持大部分，旧版 Safari 仍不识别。
常用且兼容性好的关键词：
-
Canvas（页面主背景） -
CanvasText（正文文字） -
ButtonFace/ButtonText -
Highlight/HighlightText -
Mark/MarkText（用于高亮标记）
慎用或已废弃的关键词：
-
GrayText：部分浏览器已弃用，表现不稳定 -
ActiveBorder、InactiveBorder：仅在极少数控件中有效，不推荐用于通用布局 - 任何带
-ms-前缀的（如-ms-high-contrast-adjust）：IE 专属，现代项目应弃用
SVG 图标和自定义边框怎么保色
SVG 默认也会被 forced-colors 重映射，导致图标变灰、消失或与背景同色。这不是 bug，是默认行为。
要保留原意，必须显式控制：
- 给
<svg></svg>添加style="forced-color-adjust: none" - Safari 下还需在根元素加
color-scheme: light dark，否则forced-color-adjust: none不生效 - 自定义边框别只靠
border-color，要写完整简写：border: 2px solid ButtonText（系统只接管 color 部分，width/style 仍可控） - 禁用
border-image和box-shadow，它们在 forced-colors 下退化为无或单色
最常被忽略的一点：系统色关键词不是“美化选项”，而是可访问性底线。Windows 高对比主题用户根本看不到你写的 #007bff，他们看到的是 LinkText —— 而这个值由系统决定，可能是黑、白、黄或蓝，取决于当前主题。适配不是为了视觉一致，是为了确保文字可读、控件可识别、交互可感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
