如何在CSS变量中动态计算文本对比度以满足无障碍要求？-css教程-PHP中文网

直接用darken()/lighten()会翻车，因hsl调亮与wcag感知亮度非线性；需用luma()估算、mix()加权混合，并以静态色值实测验证。

如何在css变量中动态计算文本对比度以满足无障碍要求？

为什么直接用 `darken()` 或 `lighten()` 会翻车

很多人以为给背景色调个 darken(@bg, 60%) 就能当文字色，结果一测只有 3.2:1。问题出在：这些函数基于 HSL 模型调整亮度，而 WCAG 对比度依赖人眼感知的相对亮度（luminance），两者非线性。比如 @bg: #2d2d2d，darken(@bg, 60%) 输出 #0a0a0a，理论对比度 11.2:1，但小字号加抗锯齿后实测掉到 4.3:1 —— 刚好踩线失败。

禁用 fade()、spin()、mix()：它们不保灰阶差异，易削弱对比
透明色（如 rgba(0,0,0,0.8)）不能参与对比度计算，工具也读不出最终渲染值
currentColor 和 CSS 变量（如 --text-color）必须先解析成静态 hex/rgb 值再检测

如何用 Less 手动逼近 WCAG 4.5:1

Less 没有内置 contrast() 函数，得靠组合运算+手动 luminance 估算。核心是先实现 luma()（基于 sRGB 转换公式），再反推目标文字色亮度：

对浅色背景：从 darken(@bg, 60%) 起手，再叠加 saturate() 补辨识度
对深色背景：用 lighten(@bg, 70%) 起手，小字号（≤16px）建议直接上 lighten(@bg, 75%)
更稳的做法是用 mix(#ffffff, @bg, 85%) 替代 darken()，它按亮度加权混合，更贴近 luminance 目标

所有输出必须是静态 #rrggbb 或 rgb(r,g,b)，避免变量、透明、currentColor —— 否则 WebAIM Contrast Checker 会误判。

JavaScript 运行时动态校验更可靠

CSS 预处理器只能做近似，真要卡死 4.5:1，得靠运行时校验。用 color 库最省事：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

import Color from 'color';
const bg = Color('#f9fafb');
const text = Color('#1f2937');
console.log(text.contrast(bg).toFixed(2)); // → 12.63:1
console.log(text.level(bg)); // → 'AAA'

关键点：