contrast() 仅在 Less 编译期根据背景色 luma 静态计算文字色，不支持运行时动态变色；其 @threshold 是 luma 分界点（非亮度阈值），合理范围为 30%–45%，且需配合 lighten()/darken() 微调以提升可读性与舒适度。
contrast() 函数能在编译期根据背景色“预判”可读文字色，但它不是实时感知、也不处理运行时动态变色——它只在 Less 编译时生效，适合静态主题或配置驱动的场景。
contrast() 的参数行为和常见误用
它接收四个参数：contrast(@color, @dark, @light, @threshold)，但后三个全是可选的。默认值是 black、white 和 50%。重点在于：@threshold 不是“亮度阈值”，而是“luma 值分界点”：低于该值返回 @light，否则返回 @dark。
- 错误写法：
contrast(#1a1a1a, #000, #fff, 20%)—— 这会让几乎所有深灰都返回#fff，但20%实际对应 luma ≈ 51（0–255 范围），远低于视觉安全线 - 合理范围是
30%–45%，对应 luma ≈ 76–115，更贴近 WCAG 推荐的文本可读性拐点 - 别传
hsl(0, 0%, 0%)这类无效值给@dark/@light，Less 会静默失败并回退到默认色
为什么不能直接用 contrast() 应对所有背景
因为 contrast() 只看颜色本身的 luma，不考虑周围对比、字体粗细、环境光或用户视力差异。比如：
-
contrast(#f9f9f9)返回black，但#333在浅灰背景上其实更舒适、更少眩光 -
contrast(#222)返回white，但#eee对比度仍 > 4.5:1，且更柔和，适合长段落正文 - 对饱和色（如
#ff3366）计算出的反色可能偏紫/偏青，而人眼更习惯中性灰阶文字
如何用 lighten()/darken() 微调 contrast() 输出
先用 contrast() 拿基准色，再用亮度函数“降锐度”。这不是补丁，而是设计必要步骤：
立即学习“前端免费学习笔记（深入）”；
-
@bg: #1a1a1a;@txt-base: contrast(@bg, black, white, 40%);@txt-final: lighten(@txt-base, 8%);—— 白字变浅灰，避免刺眼 -
@bg: #f0f8ff;@txt-base: contrast(@bg, #000, #fff, 35%);@txt-final: darken(@txt-base, 12%);—— 黑字加深，提升小字号可读性 - 慎用
spin()或saturate()：文字颜色不需要色相偏移，中性灰阶最安全
运行时背景色变化时 contrast() 完全失效
Less 是编译时工具，contrast() 的结果在 CSS 输出那一刻就固定了。如果背景色来自 JS 动态设置（比如用户主题切换器）、CSS 变量或服务端注入，contrast() 无法响应。
- 此时必须用 JS 计算亮度：取
getComputedStyle(el).backgroundColor→ 转 RGB → 算 luma（0.299*R + 0.587*G + 0.114*B）→ 判断切 class - CSS 变量方案可行但有限：
:root { --bg: #222; --txt: color-mix(in srgb, white 80%, black); }，但浏览器支持度仍受限（Chrome 111+） - 别在 Less 里试图用
@{variable}拼接contrast()—— 编译器不解析变量值，只会报错或返回默认
真正容易被忽略的一点：contrast() 的输出是“安全但平庸”的，它保底，不优化。要兼顾可读性与视觉品质，必须手动干预亮度，而且得在设计系统层面统一微调规则，而不是每个组件各搞一套系数。
