不能用 contrast() 函数——它仅按亮度阈值返回黑白，不校验 WCAG 4.5:1；必须手写 relative-luminance() 和 contrast-ratio() 函数，基于 sRGB gamma 校正计算相对亮度与对比度比率，再比较白/黑字达标情况并择优选取。
直接用 contrast() 函数不行——它只按亮度阈值返回黑白，不校验 WCAG 4.5:1；真要自动选可达标的文字色，得自己实现相对亮度和对比度比率逻辑。
为什么不能用 lightness() 或 contrast() 判断文本颜色
SCSS 的 lightness($color) 是 HSL 明度，和人眼感知亮度无关：#ffcc00（亮黄）的 lightness() 是 ~60%，但实际黑字发灰；contrast($color) 只是 if(lightness($color) > 50%) { white } else { black }，完全不计算对比度比率。WCAG 合规必须基于相对亮度（relative luminance）推导出的 contrast ratio。
必须手写 relative-luminance() 和 contrast-ratio()
这两个函数是整个逻辑的基础，缺一不可：
-
relative-luminance()要对 R/G/B 做 sRGB gamma 校正（if($c ），再加权求和：0.2126 * $r + 0.7152 * $g + 0.0722 * $b -
contrast-ratio($bg, $text)公式固定：(max($l1, $l2) + 0.05) / (min($l1, $l2) + 0.05)，其中$l1、$l2是两个颜色的相对亮度 - 必须用
@use "sass:math"（Dart Sass 1.33+），否则pow()不可用；旧版需手写近似幂函数或接受轻微误差 - 输入颜色支持 HEX、RGB、HSL 等任意格式，但不能是 CSS 变量（如
var(--bg)），SCSS 函数在编译期运行，无法读取运行时值
写一个 accessible-text-color() 来自动选黑或白
目标不是生成任意颜色，而是给定背景色，返回满足 AA 级（4.5:1）的最简解（通常只有黑或白可选）：
- 先算背景的
$l: relative-luminance($bg) - 分别算
contrast-ratio($bg, #fff)和contrast-ratio($bg, #000) - 用
@return if($ratio-white >= 4.5 and $ratio-white >= $ratio-black, #fff, #000)—— 白字达标且优于黑字才选白，否则选黑 - 别写成
if($ratio-white >= 4.5) { #fff } else { #000 }：有些中灰色（如 #aaa）白字和黑字都达标，但白字对比度更高、更易读 - 如果连黑白都不达标（极少见，如 #eeeeee），函数会返回
#000，但你应该在设计阶段就规避这类背景色
容易被忽略的落地细节
编译输出的是静态 HEX，但最终可读性取决于真实设备渲染：
- OLED 屏对浅灰背景（如 #f8f9fa）上的黑字渲染偏淡，DevTools 里看对比度达标，实机可能不达标
- 深色模式下，
#000和#111在视觉上几乎无差别，但前者对比度数值更低；建议深色背景用#111代替#000作为“黑字”候选，重写accessible-text-color()时传入$dark-option: #111 - 函数无法处理透明背景（如
rgba(255, 255, 255, 0.9)）——相对亮度计算要求不透明，需先转为等效不透明色或拒绝编译 - 所有结果必须用浏览器 DevTools 的“Contrast ratio”面板实测，别只信函数返回值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
