scss无法真正检测亮度，所有颜色函数均为编译时静态计算；contrast()等函数仅基于输入色明度阈值（≤50%返浅色）判断，不感知实际背景，且不支持透明色或动态值；真自动适配需js结合wcag公式实现。
SCSS里没有真正的亮度检测函数
SCSS编译时无法读取运行时背景色，所谓“自动检测”只是预设逻辑的静态计算。lighten()、darken()、contrast()这些函数不分析RGB值，而是按HSL通道做固定偏移或阈值比对——它们不看背景，只看你传进去的那个颜色值。
常见错误是写成：@include font-color(contrast($bg, #000, #fff))，以为它能“感知容器背景”，其实$bg必须是你手动传入的变量，且得是已知的、非透明的纯色。
- 如果$bg是
#000或#fff，contrast()会直接失效（返回原值） - 如果$bg含alpha（如
rgba(0,0,0,0.8)），Sass会丢弃透明度再算，结果不可靠 - 用
lightness(hsl(...))提取明度时，输入必须是HSL格式；lightness(#222)会报错，得先转hsl(color($color))
用contrast() + 手动阈值更可控
原生contrast()函数本质是：当输入色明度≤50%时返回第二个参数（深色背景用的字色），否则返回第三个参数。它内部用的是加权灰度公式，比简单平均靠谱。
但要注意它的行为边界：
-
contrast(#1a1a1a, white, black)→white（正确） -
contrast(#f9f9f9, white, black)→black（正确） -
contrast(#888, white, black)→black（因#888明度≈53%，略超阈值） - 想让#888也出white？得改阈值——但Sass没暴露这个参数，只能自己封装
推荐做法：封装一个text-color-for-bg()函数，用if(lightness($c) 替代原生<code>contrast()，把阈值从50%调到45%，适配更多中性灰。
别用spin()或adjust-color()生成“对比色”
文字颜色不是补色问题，是可读性问题。调色相（spin()）或乱提饱和度（adjust-color($c, $saturation: +30%)）只会让文字在深背景上发荧光、在浅背景上糊成一片。
真正该控的是亮度通道：
- 深背景（L lighten($base, 60%)不如直接
white稳定 - 浅背景（L > 70）→ 文字必须够暗：
darken($base, 50%)可能产出灰紫，不如black或#1a1a1a - 中性背景（40 ≤ L ≤ 70）→ 别硬切黑白，用
scale-color($c, $lightness: -0.3)微调更自然
JS才是真自动的唯一路径
如果你的背景来自图片、渐变、CSS变量动态注入或用户上传，SCSS彻底无能为力。此时必须用JS：
监听getComputedStyle(el).backgroundColor，转成RGB，套WCAG公式0.2126 * r + 0.7152 * g + 0.0722 * b算相对亮度，再设el.style.setProperty('--text-color', L 。
关键细节常被忽略：
- 透明背景（
rgba(0,0,0,0)）会被解析成rgb(0, 0, 0)，得先检查getComputedStyle里的backgroundImage是否为空 - CSS变量值要用
getPropertyValue('--bg)，不能依赖backgroundColor，后者不解析变量 - 别在
DOMContentLoaded就跑一次——图片加载完、主题切换后都得重算
SCSS能做的只是定义好--text-color的CSS规则，等JS来填值。把“自动”幻想成纯CSS方案，迟早掉进对比度不达标、打印失效、屏幕阅读器失语的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
