Sass 不提供内置对比度计算函数，需用 lightness() 快速判断文字颜色或手动实现 WCAG 对比度公式；所有计算均在编译时完成，无法响应运行时主题变化，CSS 变量需 JS 处理。
Sass 本身不提供内置的对比度计算函数，contrast() 是 CSS 原生函数（仅用于 color-mix() 的上下文，且尚未广泛支持），不能直接用在 Sass 中做动态对比度判断。你真正需要的是：用 Sass 函数预计算颜色可读性，并生成满足 WCAG 标准的配对样式。
用 lightness() 和 contrast-ratio() 手动估算对比度
Sass 没有原生 contrast-ratio()，但可通过 lightness() 快速粗筛——尤其适合深/浅主题切换场景。它不精确，但够用：
/* 判断主色是否偏暗，决定文字用白还是黑 */<br>@function text-color-for($bg) {<br> @if lightness($bg) > 60 {<br> @return #000;<br> } @else {<br> @return #fff;<br> }<br>}注意：lightness() 返回的是 HSL 色彩空间中的明度值（0–100），不是相对亮度（luminance），所以它不能替代 WCAG 对比度公式。但它响应快、无依赖，适合快速主题适配。
用自定义函数实现 WCAG 4.5:1 对比度判定
要真正符合可访问性要求，必须按 WCAG 公式算相对亮度和对比度比值。Sass 支持浮点运算，可以手动实现：
立即学习“前端免费学习笔记（深入）”；
-
relative-luminance()需将 RGB 转为线性 sRGB，再加权求和（0.2126 * R + 0.7152 * G + 0.0722 * B） -
contrast-ratio($a, $b)返回(L1 + 0.05) / (L2 + 0.05)，其中 L1 ≥ L2 - 结果 ≥ 4.5 才算达标（AA 级文本）
实际项目中建议直接引入已验证的库，比如 sass-contrast，它封装了完整逻辑并处理了 hex/rgb/keyword 输入归一化。
避免在 @media 或运行时动态调用对比度函数
Sass 是编译时语言，所有颜色计算都在构建阶段完成。这意味着：
- 无法响应用户系统偏好（如
prefers-color-scheme）实时重算——必须提前生成深/浅两套规则 - 不要试图在
@media (prefers-contrast: high)里调用contrast-ratio()，它不会重新执行 - 若需运行时控制，得交给 JS（例如用
window.getComputedStyle+calculateContrast库）
常见错误是把 Sass 当成 CSS-in-JS 工具来用，结果发现变量没更新、颜色对不上——本质是混淆了编译期与运行期边界。
真正麻烦的不是写函数，而是输入颜色的格式兼容性（比如 #abc、hsl(200, 100%, 50%)、var(--primary)）；Sass 函数无法解析 CSS 自定义属性，所以 var(--color) 类输入必须由 JS 补位或提前 resolve。
