color-contrast()是当前唯一能落地的原生方案，chrome 114+、edge 114+、safari 16.4+（需开启实验特性）已支持，它按wcag公式计算并选择满足aa标准的候选色，但必须用@supports包裹且语法须正确（如含vs和to wcag20/aa）。
color-contrast() 是当前唯一能落地的原生方案
Chrome 114+、Edge 114+、Safari 16.4+（需开启实验特性）已支持 color-contrast()，它不依赖 JS，也不需要预设亮度阈值，而是真正按 WCAG 对比度公式计算并选择满足 AA 标准的候选色。
常见错误是漏掉 vs 关键字或写错对比度级别语法：
-
color: color-contrast(var(--bg) vs #000, #fff to WCAG20/AA)✅ 正确 -
color: color-contrast(var(--bg), #000 #fff, AA)❌ 旧草案语法，已失效 -
color: color-contrast(#000 vs white black)❌ 缺少to和标准声明，部分浏览器静默失败
必须用 @supports 包裹，否则旧浏览器会跳过整条规则：
code{@supports (color: color-contrast(#000 vs #fff to WCAG20/AA)) {
.text { color: color-contrast(var(--bg) vs #000, #fff to WCAG20/AA); }
}}
hsl(from ...) + luma 判断仅适用于简单明暗切换
如果你的背景色是纯色且变化有限，hsl(from var(--bg) h s calc(l * 0.7)) 这类写法在 Chrome 111+、Firefox 115+、Safari 16.4+ 可用，但它不能自动选黑或白——你得自己写两套逻辑再靠 JS 或媒体查询切换。
真正卡住多数人的不是语法，而是没有原生 luma() 或 brightness() 函数。目前所有“根据亮度自动切色”的纯 CSS 方案，都基于一个粗糙经验阈值（比如 l 就算暗），这在浅灰（<code>#eee，L≈93）和米白（#fdf6e3，L≈92）之间完全失效。
- 深色背景（L ≤ 40）→ 用
hsl(from var(--bg) h s calc(l * 1.8))提亮文字 - 浅色背景（L > 40）→ 用
hsl(from var(--bg) h s calc(l * 0.3))压暗文字 - 但 L 值无法从
var(--bg)实时读取，只能靠人工预估或 JS 注入
mix-blend-mode: difference 适合黑白强对比场景
它不计算对比度，只是做像素级反相：白底上文字变黑，黑底上变白，中间灰阶会模糊甚至不可读。优势是零 JS、零兼容判断、100% 纯 CSS；劣势是完全不考虑可访问性标准（WCAG 要求文本对比度 ≥ 4.5:1）。
典型误用是给非纯色背景加该属性：
- 渐变背景 → 文字局部反相，出现灰边或断层
- 图片背景 → 文字颜色随图中像素跳变，阅读困难
- 半透明背景 → 反相结果叠加多层 alpha，输出不可控
只推荐用于固定黑白主题切换或装饰性标题，别用在正文、按钮、表单等需满足 WCAG 的地方。
oklch(from ...) 和 color-mix(in lch, ...) 目前不能直接用
所有稳定版浏览器（包括 Chrome 119、Firefox 128、Safari 17.6）都不支持 oklch(from var(--c) l c h) 或 color-mix(in lch, ...)。即使你在 Chrome 开启了 #css-relative-color-syntax 实验 flag，也仅支持 color(from ...) 最基础形式，且不解析自定义属性回溯（from var(--primary) 会被忽略）。
构建时转译看似可行，但实际踩坑多：
-
postcss-relative-color插件要求--primary必须是具体值（如#3a86ff），不能是另一个变量或函数调用 - 一旦
:root中写--derived: oklch(from var(--base) l c h)，PostCSS 无法展开，最终 CSS 里还是这行无效语法 - 输出结果是静态 RGB 值，失去响应式能力——
--base后续 JS 修改，--derived不会更新
真正要落地，要么等 2026 年底 CSS Color 5 进入 CR 阶段，要么老实用 color-contrast() + @supports 渐进增强，其余都属于 demo 级别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
