CSS原生无法计算对比度，因其是声明式语言，不支持运行时数值比较、条件判断及WCAG所需的RGB归一化、分段幂运算等动态计算。
不能直接用 CSS 计算对比度，必须靠 JS 或预处理器实现 WCAG 公式；浏览器 DevTools 可查但不提供 API，CSS 本身没有 contrast-ratio() 这类函数。
为什么 CSS 原生无法计算对比度
CSS 是声明式语言，不支持运行时数值比较或条件判断。像 contrast()（Less）或 accessible-contrast-color()（SCSS）这类函数，本质是编译期静态计算，不是浏览器实时渲染时执行的逻辑。而 WCAG 对比度公式 (L1 + 0.05) / (L2 + 0.05) 需要先解析颜色、归一化 RGB、分段幂运算、再比值判断——这些超出 CSS 能力边界。
常见误判：color-mix(in lch, white 70%, black 30%) 看似“混合出中间色”，但它不保证结果与背景的对比度达标；light-dark() 只响应系统主题，不响应具体颜色值。
用 JavaScript 实时验算最可靠
在运行时拿到真实渲染色（注意：不是声明的 CSS 变量或 rgba() 字符串，而是 getComputedStyle 返回的最终 rgb() 或 hsl()），再套用 WCAG 2.1 公式。
立即学习“前端免费学习笔记（深入）”；
- 务必用
window.getComputedStyle(el).color和window.getComputedStyle(el).backgroundColor获取实际值，而非读取 CSS 文本规则 - 透明色需先合成：若文字是
rgba(0,0,0,0.8)、父背景是#fff，得先按 alpha 公式算出最终文字色（≈rgb(51,51,51)），再代入亮度公式 - 直接复用成熟逻辑比手写更稳：
color-contrastnpm 包已内置相对亮度和对比度计算，且处理了 sRGB 转换细节 - DevTools 里点开颜色值旁的 ?️ 图标 → 启用 “Show blended color” → 查右侧叠加层列表，能验证你 JS 算出的结果是否匹配真实渲染
Less/SCSS 编译期预计算的适用边界
预处理器适合生成固定配色方案，比如主色 + 5 级明暗梯度，但无法应对动态背景（如用户上传图片、渐变色值未知）。
- Less 的
contrast(@bg, #000, #fff, 0.4)第四个参数是亮度阈值（不是对比度），填错会导致浅灰背景强制用白字却仍不达标 - SCSS 的
relative-luminance($color)函数依赖sass:math，且只接受编译时已知颜色字面量，var(--bg)会报错 - mix-blend-mode（如
difference）不是对比度计算，是像素级通道运算，对彩色背景常产出低对比中间灰，不可控
真正难的不是公式本身，而是确保输入值是浏览器最终渲染出的那个颜色——它可能被多层 opacity、mix-blend-mode、background-blend-mode 或父容器 filter 修改过。别跳过合成步骤直接拿 CSS 声明值去算。
