系统颜色关键字不能用于实现无障碍，因其导致对比度不可测、跨浏览器不一致且高对比度模式下失效；应改用css自定义属性配合媒体查询显式定义可验证的颜色组合。
系统颜色关键字（如 ButtonFace、ButtonText）**不能用于实现无障碍**，它们是无障碍实践中的明确风险点，不是解决方案。
为什么系统颜色关键字在无障碍检查中直接失败
主流无障碍检测工具（axe、WAVE、Lighthouse）只要看到 color: HighlightText 或 background-color: Canvas 就会报 “contrast cannot be determined”。原因很实际：
- 不同浏览器对同一关键字返回的 RGB 值完全不同：Chrome 可能返回
rgb(240, 240, 240)，Firefox 返回rgb(50, 50, 50)，Safari 可能直接 fallback 到currentColor - Windows 高对比度模式开启后，
ButtonFace可能变成纯黑，但ButtonText不一定自动变白——组合结果可能是黑字配黑底 - WCAG 要求对比度可验证、可计算，而系统关键字无法静态提取色值，
getComputedStyle(el).color返回的仍是字符串，不是可运算的 RGB
高对比度模式下真正可靠的适配方式
当 @media (forced-colors: active) 生效时，应放弃“猜测系统映射”，转为显式声明语义化行为：
- 用
forced-color-adjust: none主动关闭系统强制覆盖，只对关键控件保留系统色（如按钮边框），其余全部用确定色值 - 配合
prefers-contrast: high单独定义一套高对比度样式，例如：.btn { color: black; background-color: white; border: 3px solid black; } - 必须禁用所有依赖亮度差的视觉提示（如浅灰文字、阴影、渐变），改用粗边框、图标、间距等非色彩维度传递信息
替代系统关键字的现代写法
用 CSS 自定义属性 + 媒体查询组合，确保每种颜色组合都可测、可控：
:root {
--text-primary: #1a1a1a;
--bg-primary: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e0e0e0;
--bg-primary: #121212;
}
}
@media (prefers-contrast: high) {
:root {
--text-primary: #000000;
--bg-primary: #ffffff;
}
}
body {
color: var(--text-primary);
background-color: var(--bg-primary);
}
这样写的每一组值都能用 WebAIM Contrast Checker 验证是否 ≥ 4.5:1；也能在 DevTools 的 Accessibility 面板里实时看到渲染后的对比度数值。
系统颜色关键字的问题不在于“不支持高对比度”，而在于它把颜色控制权让渡给了不可观测、不可测试、不可跨浏览器复现的底层实现——这对需要稳定交付无障碍体验的产品来说，是根本绕不开的红线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
