不能用#000或rgb(0,0,0)写高对比模式下的文字色，因为forced-colors: active生效时浏览器会强制覆盖所有硬编码color值，替换成canvastext等语义化系统色，!important和js设置均无效。
为什么不能用#000或rgb(0,0,0)写高对比模式下的文字色
因为forced-colors: active生效时，浏览器会强制覆盖所有硬编码的color和background-color值——无论你写#000、rgb(0,0,0)还是hsl(0,0%,0%)，最终都会被替换成系统定义的语义色（如ButtonText）。这不是 bug，是规范行为。!important无效，JS 动态设置也无效。
ButtonFace、ButtonText这些关键字怎么选
系统颜色关键字不是装饰用的，而是映射到当前高对比主题下的真实系统色。选错会导致文字不可见或反色失效：
-
Canvas/CanvasText：用于主体区域背景和正文文字，最常用 -
ButtonFace/ButtonText：按钮、卡片等交互容器的背景与文字配对 -
Highlight/HighlightText：用于选中态、警告提示等强调区域 -
GrayText：禁用态文字，不要用于正常可操作元素 - 避免混用不匹配组合，比如
background-color: ButtonFace配color: GrayText——后者在高对比下可能是浅灰，对比度直接跌破 3:1
SVG 图标和自定义边框为什么变灰了
SVG 的fill和stroke默认也会被系统重映射，导致图标失去辨识度。解决方法必须显式声明：
- 加
forced-color-adjust: none禁用重映射 - Safari 还需配合
color-scheme: light dark声明，否则forced-color-adjust不生效 - 边框要用
border-color: ButtonText这类语义色，而不是border: 1px solid #ccc - 渐变
linear-gradient()和阴影box-shadow在高对比下会被降级为单色或完全消失，别依赖它们做视觉区分
@media (forced-colors: active) 写法常见报错原因
DevTools 显示 “Invalid CSS media query” 基本就这三类写法错：
-
@media forced-colors: active→ 缺括号，必须是@media (forced-colors: active) -
@media (forced-colors: true)→ 值错误，只能是active，不是布尔值 -
@media (prefers-contrast: high)→ 语义错位，它只表示用户偏好，不代表系统已接管渲染
真正生效的只有@media (forced-colors: active)，且必须放在 CSS 文件末尾或@layer base之后，避免被其他规则覆盖。Safari 17.4+ 才支持，旧版 Safari 完全忽略，得靠prefers-contrast降级兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
