SCSS无内置contrast-color()函数，需手写relative-luminance()和contrast-ratio()并用if()判断黑白；因lightness()不反映人眼感知亮度，如#ff0000与#00ff00的lightness()同为50%但相对亮度分别为0.21和0.72，darken()亦无法保证WCAG对比度≥4.5。
直接结论：SCSS 本身没有现成的 contrast-color() 函数，必须手写 relative-luminance() 和 contrast-ratio()，再用 if() 判断黑白哪个达标——否则靠 lightness() 或 darken() 会在线性色相（黄、青、浅紫）上大面积翻车。
为什么不能用 lightness() 或 darken() 切黑白文字色
因为 HSL 的 lightness() 值不反映人眼感知亮度。比如 #ff0000（纯红）和 #00ff00（纯绿）的 lightness() 都是 50%，但实际相对亮度分别是 0.21 和 0.72；darken($color, 20%) 只是线性降亮+减饱和，完全不保证对比度 ≥ 4.5。
常见翻车场景：
-
#ffcc00（亮黄）lightness()≈ 60%，黑字发灰、不可读，但contrast-ratio(#ffcc00, #000)≈ 3.8 → 不达标 -
#e6f7ff（极浅蓝）lightness()≈ 95%，黑字依然清晰，contrast-ratio(#e6f7ff, #000)≈ 5.2 → 达标 - 所有依赖
lightness() > 50%的判断，在非灰阶色相上都不可信
怎么写可靠的 relative-luminance() 函数
WCAG 2.1 要求先对 sRGB 各通道做 gamma 校正（非线性转换），再加权求和：L = 0.2126×R + 0.7152×G + 0.0722×B。SCSS 不支持浮点幂运算，但 Dart Sass 1.33+ 内置了 pow()，可直接用：
立即学习“前端免费学习笔记（深入）”；
@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;
}注意点：
- 必须用
red($color)、green($color)、blue($color)提取分量，不能用hsl()或lightness() - 旧版 Sass（pow()，需引入
@use "sass:math"并改用math.pow() - LibSass 已淘汰，别再兼容它
怎么封装一个真正可用的 accessible-contrast-color()
目标不是“生成任意对比色”，而是给定背景色，返回满足 AA 级（≥4.5）的最简解：黑或白。核心逻辑是分别算出与 #000 和 #fff 的对比度，选达标且更高的那个：
@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 accessible-contrast-color($bg, $min-ratio: 4.5) {
$cr-white: contrast-ratio($bg, #fff);
$cr-black: contrast-ratio($bg, #000);
@return if($cr-white >= $min-ratio and $cr-white >= $cr-black, #fff, #000);
}使用方式：
-
color: accessible-contrast-color(#3498db);→ 返回#fff -
color: accessible-contrast-color(#f1c40f);→ 返回#000（黄底黑字更可读） - 该函数只返回黑白，不尝试生成中间色——这是可访问性设计的底线，不是配色创意工具
SCSS 方案的硬边界在哪
它只能在编译时静态计算，无法响应运行时变化的颜色（比如 JS 动态改的 --bg）。如果项目需要真动态适配，得配合 CSS color-contrast()（Chrome 114+/Edge 114+/Safari 16.4+）+ @supports 降级，或用 JS fallback。SCSS 的作用是：确保主题色板里每个预设背景色，都配上了经 WCAG 验证的文字色。最容易被忽略的是——你写了这个函数，但没在所有用到背景色的地方调用它；或者把 $bg 传进来之前，已经被 darken() 处理过一次，导致输入失真。
