calc()无法替代WCAG对比度计算，因其仅支持基础数值运算，不支持RGB通道解析、伽马校正、非线性转换或相对亮度加权等WCAG必需步骤，所有合规计算必须依赖JS实时执行或预处理器编译。
不能直接用 CSS 数学公式算出合规颜色，calc() 不支持亮度计算、对比度判断或颜色空间转换——它只做数值加减乘除，不理解颜色语义。
为什么 calc() 无法替代 WCAG 对比度计算
CSS 的 calc() 函数连 RGB 通道都拆不开，更别说执行伽马校正或加权求和。比如你写 calc((0.2126 * r + 0.7152 * g) / 255)，浏览器会直接报错：r/g 不是变量，也不是可计算值。所有涉及 WCAG 的核心步骤——RGB 归一化、非线性转换（(x + 0.055) / 1.055 的 2.4 次方）、相对亮度加权——都必须在 JS 或预处理器中完成。
-
calc()里不能调用red()、luminance()等函数，CSS 原生无此类能力 - 写
background-color: hsl(0, 0%, calc(100% - var(--text-l)))是经验估算，不是 WCAG 合规计算 - 哪怕浏览器支持
color-mix()，它混合的是色值，不验证结果是否 ≥4.5:1
真正能落地的数学计算必须在预处理器里做
以 Sass 为例，relative-luminance() 和 contrast-ratio() 必须手动实现，且依赖 Dart Sass 1.33+（LibSass 已淘汰）：
@function relative-luminance($color) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;
$r: if($r < 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
$g: if($g < 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
$b: if($b < 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));
@return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
}
<p>@function contrast-ratio($bg, $text) {
$l1: relative-luminance($bg);
$l2: relative-luminance($text);
$l-max: max($l1, $l2);
$l-min: min($l1, $l2);
@return ($l-max + 0.05) / ($l-min + 0.05);
}- 这个公式严格复现 WCAG 2.1 定义，不是近似值
- 输出是纯数字，可用于
@if contrast-ratio($bg, #fff) >= 4.5判断 - 但注意：Sass 编译后输出静态色值，无法响应运行时主题切换
JS 计算才是动态场景下的唯一可靠路径
当背景色来自用户输入、CSS 变量或 JS 控制时，必须用 JS 实时获取渲染后的真实颜色（含 rgba() 叠加效果），再套用 WCAG 公式：
立即学习“前端免费学习笔记（深入）”；
- 用
window.getComputedStyle(el).color拿到最终计算后的颜色字符串 - 用
color-convert或手写函数解析成 RGB，再执行伽马校正和加权 - 对半透明背景，必须先用
overlayOn()模拟其在白/黑底上的合成色，再分别计算对比度范围 - 最后设
el.style.color = contrastRatio >= 4.5 ? 'white' : 'black'
最容易被忽略的是：设计师给的 #333333 在 #ffffff 上是 4.48:1 —— 差 0.01 就 Fail，而这个误差在 JS 计算中会暴露无遗；靠肉眼、靠 HSL lightness、靠“差不多”选色，都会在无障碍审核时被退回。
