怎么在SCSS中通过函数自动对比度计算生成无障碍CSS颜色-css教程-PHP中文网

应使用 wcag 2.1 的 relative-luminance 和 contrast-ratio 判断文字颜色，因 hsl 的 lightness() 不符合人眼感知亮度；正确做法是 contrast-ratio($bg, #fff) >= 4.5，而非 lightness($color) > 50%。

怎么在scss中通过函数自动对比度计算生成无障碍css颜色

SCSS 里不能“实时生成”无障碍颜色，但能预计算出满足 WCAG AA（≥4.5:1）的文字色选择逻辑——核心是用 relative-luminance 和 contrast-ratio 替代 lightness()，否则在黄、青、浅紫等色相上必翻车。

为什么不能用 `lightness()` 判断黑白字色

它不是人眼感知亮度：#ffcc00（亮黄）lightness() ≈ 60%，但实际相对亮度高达 ~0.72，黑字发灰；而 #e6f7ff（极浅蓝）lightness() ≈ 95%，却仍能清晰显示黑字。HSL 的 L 值不加权、无 gamma 校正，完全无法替代 WCAG 公式。

所有依赖 lightness($color) > 50% 的判断都应立即替换
darken()/lighten() 是线性调整，不保证对比度达标
纯 CSS 变量（如 --bg）在 SCSS 编译期不可见，函数无法读取

`relative-luminance()` 函数必须手动实现

Dart Sass 不支持浮点精度控制，且 pow() 在旧版中行为不一致，需用 sass:math 并显式处理分支。以下为实测兼容 Dart Sass 1.33+ 的写法：

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

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

下载

@use "sass:math";
<p>@function relative-luminance($color) {
$r: red($color) / 255;
$g: green($color) / 255;
$b: blue($color) / 255;</p><p>$r: if($r </p><p>@return 0.2126 <em> $r + 0.7152 </em> $g + 0.0722 * $b;
}</p>

别用 LibSass —— 它已淘汰，pow() 行为错误且不支持 sass:math
阈值 0.03928 来自 sRGB gamma 切换点，不能四舍五入或简化
权重系数 0.2126/0.7152/0.0722 是 WCAG 强制要求，不可改

`is-dark-enough-for-white-text()` 是唯一可靠判断入口

它封装了真实对比度计算，只回答一个问题：“白字在该背景上是否 ≥4.5:1？”返回布尔值，供 @if 直接消费：

@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);
}
<p>@function is-dark-enough-for-white-text($bg) {
@return contrast-ratio($bg, #fff) >= 4.5;
}</p>