system colors 是无障碍设计中的危险源，因其不可预测的跨浏览器解析、无法响应现代系统主题变化、不可验证对比度，导致文字消失或对比不足，必须用确定性颜色配合 prefers-color-scheme 和 prefers-contrast 媒体查询替代。

System Colors 在无障碍设计中不是“重要”，而是**危险源**——它根本不能用于可控的无障碍实践。

什么是System Colors？

这是 CSS 2.1 定义的一组特殊关键字，比如 ButtonFace、HighlightText、Window、MenuText 等。它们本意是让网页“跟随操作系统主题”，但实际行为完全不可预测：

• 不同浏览器对同一关键字的解析差异极大（Chrome 可能映射为灰白，Firefox 可能返回深蓝，Safari 直接忽略）
• 现代 OS 主题（如 Windows 深色模式、macOS 辅助功能高对比度模式）不保证这些值会随系统变化实时更新
• WCAG 明确要求对比度可验证，而 ButtonFace 这类值无法静态获取 RGB，更无法计算对比度比值

System Colors 为什么会在无障碍检查中失败？

当你写 color: HighlightText;，你无法知道它在用户屏幕上最终是白色还是浅黄，也无法判断它和 background-color: ButtonFace; 的组合是否达到 4.5:1。实测常见问题包括：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• Windows 高对比度模式下，ButtonText 可能变成纯黑，但背景 ButtonFace 同时变黑 → 文字彻底消失
• Linux GNOME 中，MenuText 常被映射为极低饱和度的灰色，在非高对比主题下与背景几乎无差别
• 所有主流无障碍检测工具（axe、WAVE、Lighthouse）都会将含 System Colors 的样式标记为 “contrast cannot be determined”

替代方案：用确定性颜色 + 媒体查询

真正可行的路径是放弃系统关键字，改用明确色值，并通过标准机制响应系统偏好：

• 用 prefers-color-scheme 切换预定义的深/浅色变量：color: var(--text-primary);，再在 :root 中分别定义 --text-primary 的 light/dark 值
• 用 prefers-contrast: high 单独提供高对比度版本（如强制黑白、加粗边框），而非依赖系统映射
• 所有颜色组合必须通过 calculateContrast() 类函数或 WebAIM 工具验证，确保满足 isLargeText ? 3.0 : 4.5 阈值

系统颜色关键字的存在本身就是一个历史包袱。它看起来“尊重系统”，实际上把对比度控制权交给了不可控的底层实现——这对需要稳定可访问性的产品来说，是最不该冒的风险。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！