目前没有任何浏览器原生支持contrast这类css颜色函数，它仅存于早期草案中且从未落地；所谓“自动对比色”需开发者手动计算背景亮度并切换文字颜色，核心逻辑是判断背景明暗后选择白或黑文字。
为什么直接用 color: contrast 行不通
目前没有任何浏览器原生支持 contrast 这类 CSS 颜色函数（它只存在于早期草案中，从未落地）。你看到的“自动对比色”效果，必须靠开发者手动计算亮度并切换——核心是判断背景够不够暗，再决定文字用白还是黑。
怎么用 calc() 和 CSS 变量算出背景亮度
CSS 本身不能读取真实像素值，但我们可以把背景色“提前约定”为一组可计算的变量，比如用 HSL 或 RGB 的数值形式声明。最稳妥的做法是只控制单一主色（如品牌色），然后基于它的 luminance 做阈值判断：
- 把主背景色拆成
--bg-r、--bg-g、--bg-b三个自定义属性 - 用 WCAG 公式近似亮度：
calc((0.2126 * var(--bg-r) + 0.7152 * var(--bg-g) + 0.0722 * var(--bg-b)) / 255) - 结果在 0–1 之间，
就算暗背景，文字用 <code>white；否则用black
注意：这个公式不能写进 color 属性里（CSS 不允许在颜色值中嵌 calc 判断），得配合 clamp() 或媒体查询模拟分支——实际更常用的是预设两套变量 + color: var(--text-color) 切换。
如何用 :root + @media (prefers-contrast) 做兜底
用户开启系统高对比模式时，prefers-contrast 媒体查询会生效，这时应忽略亮度计算，强制用高对比配色：
:root {
--text-color: black;
}
@media (prefers-contrast: high) {
:root {
--text-color: black;
--bg-color: white;
}
}
别指望它能自动翻转颜色——它只是个信号，仍需你手动指定配色方案。同时注意：该查询不触发亮度重算，和前面的 calc 逻辑是正交关系，要分开处理。
最容易被忽略的坑：动态背景图或渐变怎么办
上面所有 calc 方法只适用于纯色背景。一旦用了 background-image、径向渐变或视频，CSS 就完全无法感知实际显示区域的亮度。此时唯一可靠路径是 JS：
- 用
getComputedStyle(el).backgroundColor读不到渐变，只能读到初始值 - 真要响应式适配，得用
canvas截图采样中心点像素，再算 luminance - 或者放弃自动，改用设计约束：规定所有带文字的容器，必须通过
--bg-tone显式声明“视觉明暗等级”（如light/dark），让 CSS 变量按此切换
没有银弹。所谓“自动”，本质是把判断权从运行时移到开发时或有限场景里——这点不厘清，很容易在动效组件或 CMS 内容区踩空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
