system-color不存在，浏览器静默忽略；应使用canvastext等css color level 4系统语义色关键字，配合fallback和@media (forced-colors: active)兜底，确保高对比度、深色模式等辅助功能下颜色语义正确且可视。

system-color 不能提升可访问性——它根本不存在，浏览器会静默忽略该值，对可访问性零贡献。 你看到的“system-color”大概率是把 system-ui（字体关键字）和 CSS Color Level 4 的系统语义色（如 CanvasText、ButtonText）混淆了。写 color: system-color; 等同于写错语法，CSS 解析器直接跳过，不报错、不生效、也不 fallback。

为什么 CanvasText 这类系统色关键字才真正影响可访问性？

它们不是固定颜色，而是操作系统在当前辅助功能上下文（如高对比度模式、深色模式、屏幕阅读器环境）下提供的语义化颜色映射：

• CanvasText 表示“主文本色”，在 Windows 高对比度主题下可能是亮黄，在 macOS VoiceOver 模式下可能是粗黑描边白字
• ButtonText 和 ButtonFace 在强制颜色模式（@media (forced-colors: active)）中由系统强制注入，确保控件文字与背景始终满足 WCAG 对比度要求
• 这些值被设计为“响应系统级辅助设置”，而非仅响应 @media (prefers-color-scheme)

裸用 CanvasText 为什么反而损害可访问性？

直接写 color: CanvasText; 看似省事，但实际风险极高：

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

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

下载

• Firefox 至今（2026 年 5 月）仍不支持该关键字，降级为 UA 默认色（通常是黑色），在深色系统下文字完全不可读
• 构建工具（如 Lightning CSS）可能将未知颜色值静默移除，CI 构建后样式消失，本地开发却正常，难以排查
• 未配合 @media (forced-colors: active) 显式重置时，高对比度模式下按钮文字可能和背景同色（例如都变成亮黄）

安全使用系统语义色的最小必要条件

必须同时满足以下三点，否则不如不用：

• 提供 CSS 自定义属性 fallback：color: var(--text, CanvasText);，并在 :root 中定义 --text: #1a1a1a;
• 显式声明高对比度兜底：@media (forced-colors: active) { color: ButtonText; background-color: ButtonFace; }
• 确保 <meta name="color-scheme" content="light dark"> 已置于 开头，否则原生控件（如 <input> 边框）无法响应系统语义色

真正难的不是让颜色“变暗”或“变亮”，而是让颜色在屏幕阅读器、高对比度开关、Windows 暗黑滤镜、macOS Reduce Transparency 等数十种辅助功能组合下，依然保持语义正确且视觉可用。系统语义色关键字只是其中一环，依赖它单点突破，反而容易在最关键的场景掉链子。

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