css 的 calc() 不支持 color-contrast 或 contrast()，仅能进行数值运算；真·动态对比度需 js 计算 wcag 比较比并设 css 变量，或用 hsl 经验公式估算，亦可借助 prefers-contrast 等媒体查询渐进增强。
calc() 里不能直接用 color-contrast 或 contrast()
很多人一上来就写 background-color: calc(contrast(black, white) > 0.5 ? black : white)，这会直接报错——CSS 原生不支持条件判断，也没有 contrast() 这个函数。CSS 的 calc() 只做数值运算（+、-、*、/、min()、max()、clamp()），不处理颜色语义或可访问性对比度逻辑。
真正能动态响应文本色、生成合规背景的方案，必须靠外部逻辑驱动：要么 JS 实时计算 WCAG 对比度并设 CSS 变量，要么用 HSL/HWB 空间做经验性反色估算（非严格合规，但轻量）。
用 HSL 调整亮度做“伪对比色”：简单但有局限
如果你只需要快速让背景在深色文字下变亮、浅色文字下变暗，可以用 hsl() + calc() 组合手动偏移亮度值：
body {
--text-hsl: 0 0% 20%; /* 假设文字是深灰 */
color: hsl(var(--text-hsl));
background-color: hsl(
calc(0 * 1), /* 保持原色相 */
calc(0 * 1%), /* 饱和度归零（可选） */
calc(100% - (20% - 0%)) /* 用文字亮度反推：文字越暗，背景越亮 */
);
}
这个思路本质是经验公式，不是 WCAG 计算。实际使用要注意：
-
hsl()中的亮度（L）不是线性感知亮度，L: 20%的灰和L: 80%的灰在 sRGB 下真实相对亮度差远小于 60% - 完全依赖 HSL 会导致彩色文字（如
hsl(200 80% 40%)）生成的背景偏蓝紫，可能反而降低可读性 - 无法保证达到 WCAG AA/AAA 要求（4.5:1 或 7:1），仅适合内部工具或视觉草稿
真·动态对比度：JS 计算 + CSS 自定义属性联动
要真正满足可访问性要求，必须用 JS 调用 getContrastRatio()（来自 color-convert 或手写 YIQ 公式），再把结果注入 CSS 变量：
function setBgForText(textColor) {
const bgLight = '#ffffff';
const bgDark = '#000000';
const ratioLight = getContrastRatio(textColor, bgLight);
const ratioDark = getContrastRatio(textColor, bgDark);
document.documentElement.style.setProperty(
'--auto-bg',
ratioLight >= 4.5 ? bgLight : bgDark
);
}
然后在 CSS 中消费：
p {
color: var(--text-color, #333);
background-color: var(--auto-bg, #fff);
}
关键细节：
- 别只试黑白——深灰（
#333）配白背景对比度约 12:1，但配黑只有 1.2:1；而亮黄（#ff0）配黑是 10:1，配白却只有 1.1:1 - 每次修改
--text-color后必须重新调用 JS 函数，CSS 变量不会自动重算 - 若文本色来自外部（如用户主题色 picker），务必监听变化并触发重算，否则背景会“卡住”
浏览器原生方案：prefers-contrast 和 forced-colors（有限但渐进可用）
CSS 媒体查询现在能响应系统级对比度偏好，虽然不能“计算”，但能规避部分动态需求：
@media (prefers-contrast: high) {
body { background-color: black; color: white; }
}
@media (forced-colors: active) {
* { forced-color-adjust: none; }
button { background-color: ButtonFace; }
}
注意点：
-
prefers-contrast只有high/low两级，没有中间值，也不能结合具体颜色做细粒度调整 -
forced-colors模式下，自定义background-color默认被忽略，必须显式加forced-color-adjust: none - 这两个特性在 Safari 17.4+、Chrome 122+、Firefox 125+ 才稳定支持，旧版需降级 fallback
真正可靠的动态对比度，始终绕不开 JS 主导的计算链路；CSS 的 calc() 只能打辅助，别指望它替你读取颜色、查表、跑 WCAG 公式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
