纯CSS无法实时计算对比度，因color-contrast()未被任何浏览器实现；可靠方案是预计算+语义化媒体查询+强制色彩兜底。
直接结论：别指望纯 CSS 实时计算对比度，当前浏览器不支持 color-contrast() 函数；真正能落地的方案是预计算 + 语义化媒体查询 + 强制色彩兜底。
为什么 color-contrast() 现在不能用
它还在 CSS Color Module Level 5 草案阶段，Chrome、Firefox、Safari 全部未实现。你写 color: color-contrast(#3366ff, white, black);，浏览器会直接忽略整条声明，退回到继承色或初始值。网上很多教程演示的“效果”，实际是 JS polyfill 或 DevTools 手动覆盖后的假象。
常见错误现象：
- 样式面板里显示
color: color-contrast(...)，但 computed 栏始终是color: initial - 用 axe 或 Lighthouse 扫描，仍报“文本对比度不足”，说明函数根本没生效
- 试图在 SCSS 里用
@function模拟 WCAG 算法——Sass 缺少浮点幂运算支持，pow($value, 0.4166667)会严重失真，返回的黑/白判断常出错
@media (prefers-contrast: high) 该改什么、不该改什么
这不是重写主题，而是补系统接管后丢失的关键辨识度。Windows/macOS 高对比模式下，系统只强制替换颜色语义，不改结构和间距。
必须显式设置的属性：
-
border-color: currentColor或CanvasText（自定义appearance: none的在 Edge 下会消失） -
outline: 2px solid CanvasText（系统清空焦点框，不补就看不见 Tab 焦点） -
fill: ButtonText、stroke: HighlightText（SVG 图标默认被忽略颜色） -
text-shadow: none（高对比下阴影可能渲染异常或遮挡文字）
绝对禁止覆盖的属性：
-
background-color：系统已设为纯色，强行写#fff可能让文字在白色背景上也变白 -
color直接写 HEX/RGB：如color: #007bff会被无视，必须用ButtonText等语义关键词 -
box-shadow、gradient：在高对比下直接退化为空，写了等于白写
@media (forced-colors: active) 是更硬的底线
它比 prefers-contrast 更激进：不是“用户偏好”，而是“系统已经动手重绘”。此时 !important 失效，rgba() 和透明背景极危险（可能变成纯黑底+黑字）。
安全写法要点：
- 所有颜色必须用语义关键词：
color: CanvasText、background-color: ButtonFace、border-color: GrayText - 要保留图标/品牌色？必须同时写
forced-color-adjust: none+ 显式fill或color，缺一不可 - 测试别等用户开系统设置：Chrome DevTools → Rendering → Emulate forced colors，秒级触发
- Firefox 当前（2026 年 8 月）仍不支持
forced-colors，需单独降级 fallback
真正能跑通的动态文字色方案
如果你的背景色是动态的（比如 CMS 控制的 banner 背景），JS 运行时计算仍是唯一可靠路径：
- 用标准 WCAG luminance 公式算相对亮度，避开 Sass 浮点缺陷
- 对
rgba()背景，先合成到页面默认背景再算（不能直接传透明值） - 返回
black或white后，用style.color = result注入，而非生成一堆 class - Font Awesome 7 的
fa-color-contrast()可直接用，但它要求你引入完整 SCSS 源码，且不处理 alpha —— 很多团队卡在这一步，误以为是函数 bug
最易被忽略的一点：无论用哪种方案，都必须在 @media (forced-colors: active) 中再加一层语义色覆盖。因为当系统接管时，JS 计算的颜色值会被直接丢弃，只有语义关键词才能存活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
