calc() 无法计算颜色对比度，因其不支持解析RGB值、提取通道或执行亮度公式；必须用JS预计算亮度并设置CSS变量，再通过rgb(var(--text))应用。
calc() 不能直接计算颜色对比度
直接用 calc() 对 RGB 数值做加减乘除，无法生成“对比色”——因为对比度不是线性运算问题，而是基于亮度（luminance）和 WCAG 2.1 标准的感知判断。浏览器不支持在 calc() 中解析 rgb(…) 值、提取通道、套用亮度公式再反推新颜色。你写的 calc(rgb(100, 150, 200) + 50) 会直接报错或被忽略。
真正可行的替代路径：预计算 + CSS 自定义属性
把亮度计算和对比色逻辑交给 JS 或构建工具，在运行前算好结果，再注入 CSS 变量。例如：给定一个背景色 --bg: 100, 150, 200，JS 可以计算其相对亮度，判断是否该用黑/白文字，并设置 --text: 0, 0, 0 或 --text: 255, 255, 255：
document.documentElement.style.setProperty('--text', isDark ? '0, 0, 0' : '255, 255, 255');然后 CSS 中直接使用：
.card { background: rgb(var(--bg)); color: rgb(var(--text)); }这样既保持了 CSS 的简洁性，又绕过了 calc() 的能力边界。
立即学习“前端免费学习笔记（深入）”；
如果坚持纯 CSS，只能做固定偏移模拟（慎用）
某些场景下，开发者会用 calc() 对单个通道做粗略调整，比如让深色变浅、浅色加深，但这不是真正对比色，只是视觉上“反向感”增强：
-
--r: 100→calc(255 - var(--r))得到155，类似“通道取反” - 但
rgb(calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)))会产生意外色相（如青变橙），且不保证可读性 - 对灰阶有效（
rgb(120,120,120)→rgb(135,135,135)还是灰），但对彩色完全不可靠 - 不适用于 HSL 转换，CSS 不支持在
calc()中调用hsl()或转换函数
真正需要对比色时，别省掉亮度计算这步
WCAG 要求文本与背景的对比度 ≥ 4.5:1（正常文本），这必须用标准亮度公式：L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear，其中 R_linear = (R/255)^2.2 …… 这些幂运算和条件分支，CSS 原生无法表达。硬塞进 calc() 不仅写不出来，就算用 CSS Houdini 或 @property hack，也远超维护成本。
所以，别试图用 calc() “算出对比色”，它连输入（RGB 值）都拿不到——你传给它的只能是数字变量，不是颜色本身。真要动态响应，JS 计算 + CSS 变量才是当前最稳的路。
