应优先使用canvastext等系统语义色关键词而非固定颜色值；canvastext在高对比度模式下由系统动态提供合规文本色，chrome/edge≥115和safari支持，firefox安全降级；需用@media (forced-colors: active)兜底并避免background-color等被忽略。
直接用 CanvasText、ButtonFace 这类系统语义色关键词，比写死 #000 或 white 更可靠；它们不是“备选方案”，而是高对比度模式下唯一能真正生效的颜色声明方式。
为什么 color: black 在高对比度下会失效
系统启用高对比度后，浏览器会强制接管所有颜色语义——black 是固定 RGB 值，不带任何语义，也不响应主题切换或辅助功能设置。它在深色模式下可能变成不可读的灰黑，在高对比度模式下甚至被忽略或降级为系统默认文本色（但不可控）。
而 CanvasText 是 CSS Color Level 4 定义的语义关键词，明确表示“主文本色”。它的值由操作系统实时提供：浅色模式下≈#333333，深色模式下≈#e0e0e0，高对比度模式下则取系统定义的高对比文本色（如纯白或亮黄），天然满足 WCAG 对比度要求。
- Chrome/Edge ≥115 和 Safari 支持
CanvasText；Firefox 当前不支持，但会安全降级为 UA 默认文本色（不是崩溃或空白） - 别写
color: -webkit-text—— 这是已弃用的 WebKit 私有值，现代 Chromium 不认，Firefox 完全无视 - 所有系统色关键词（
Canvas、ButtonFace、ButtonText等）都只在color、background-color、border-color等属性中起作用，不能用于box-shadow或filter
如何用 @media (forced-colors: active) 安全兜底
即使用了 CanvasText，仍需在高对比度激活时显式覆盖部分样式，因为某些旧规则可能干扰语义色的实际渲染效果。
必须写成 @media (forced-colors: active)，漏括号、写成 forced-colors: true 或误用 @media (prefers-contrast: high) 都不会触发。
- 把该媒体查询块放在 CSS 文件末尾，避免被更早的通用规则覆盖
- 不要嵌套在
@supports里——forced-colors不是 CSS 特性，@supports (forced-colors: active)永远返回 false - 开发时用 Chrome DevTools → Rendering 面板勾选 Emulate forced colors 快速验证，比反复开关系统设置高效得多
- 在这个媒体查询内，可重设
background-color: ButtonFace、color: ButtonText，而不是硬写!important去对抗系统强制
哪些地方容易踩坑
最常被忽略的一点：高对比度模式下，background-color 属性本身会被浏览器忽略——你写的 #ffffff 或 linear-gradient() 全部失效，系统会统一替换为 Canvas 或 ButtonFace。这不是 bug，是规范行为。
- 不要试图用
forced-color-adjust: none强行保留自定义背景色——它只对 SVG 和少数元素有效，且会破坏可访问性合规（尤其对屏幕阅读器用户） - 渐变、图片背景、阴影等视觉增强手段在
forced-colors: active下基本清空，应改用语义色 + 结构化布局传递信息 - 图标如果依赖
fill颜色表达状态，建议内联 SVG 并加forced-color-adjust: none，但必须同步提供文字替代（aria-label） - 测试时务必在系统级开启高对比主题（Windows 设置 → 辅助功能 → 高对比度；macOS 系统设置 → 辅助功能 → 显示 → 增加对比度），仅调高浏览器缩放或改字体无效
系统色关键词不是“锦上添花”的兼容技巧，而是高对比度场景下的基础能力。一旦漏掉 CanvasText 或误用 prefers-contrast，就等于主动放弃对大量辅助技术用户的可访问性支持——这点在政企、教育、医疗类项目中尤为关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
