<p>OKLCH下文本反色无内置函数，需手动控制L值并设感知安全阈值：用--bg-l暴露背景亮度，--text-l: clamp(25%, calc(100% - var(--bg-l)), 75%)动态映射文字亮度，配合@supports (color: oklch(0% 0 0))降级。</p>
直接用 color-mix() 或 contrast-color() 无法可靠实现 OKLCH 下的文本反色——前者不支持 OKLCH 空间插值，后者尚未被任何浏览器实现（截至 2026 年 10 月）。真正在生产中可用的方案，是手动控制 L 值并搭配感知安全的阈值判断。
OKLCH 中没有“自动反色函数”，只有可预测的明度翻转逻辑
OKLCH 本身不提供 invert() 或 opposite() 这类函数。所谓“反色”，在可读性语境下实际指：当背景太暗时文字要亮，太亮时文字要暗，且全程不偏色、不发灰、不崩对比度。这靠的是对 L（亮度）通道的主动干预，而非颜色空间内置能力。
- OKLCH 的 L 是感知亮度标度（0% = 黑，100% = 白），同一 L 值在所有色相下视觉明暗一致——这是你敢动它的前提
- 但 L 不是二值开关：
oklch(30% 0.28 240)和oklch(70% 0.28 240)是同一蓝调的深浅两极，不是“正/反”关系 - 所谓“反色”，本质是根据背景 L 值动态选择文字 L 值，使二者 ΔL ≥ 0.35（对应 WCAG AAA 级对比度下限）
用 CSS 自定义属性 + calc() 实现 L 值条件翻转
不能依赖 JS 或媒体查询做粗粒度切换，必须在 CSS 层级响应背景明度变化。核心是把背景 L 值暴露为自定义属性，再用 calc() 判断区间并映射文字 L。
- 先定义背景色为 OKLCH，并提取其 L 值作为变量：
--bg-l: 62%;（注意单位！缺 % 整行静默失效） - 文字 L 按规则计算：
--text-l: clamp(25%, calc(100% - var(--bg-l)), 75%);—— 这能保证文字 L 始终与背景 L 保持中等反差，又不会极端到刺眼或不可读 - 最终颜色写成：
color: oklch(var(--text-l) 0.28 240); - 若需更高精度，可分段：
--text-l: max(25%, min(75%, calc(100% - var(--bg-l))));，避免 clamp 在旧浏览器降级异常
@supports 检测失败时，fallback 必须覆盖全部场景
OKLCH 不支持时，整条 oklch() 声明被跳过，浏览器会取上一条声明。但如果你只写了 color: #fff; 作 fallback，而背景是深色，就会出现白字配白底——完全不可读。
立即学习“前端免费学习笔记（深入）”；
- 降级色必须和背景色协同设计：比如背景 fallback 是
#1e293b（深灰），文字 fallback 就该是#f1f5f9（浅灰），不能硬写#000或#fff - 检测语句必须带单位：
@supports (color: oklch(0% 0 0))✅，@supports (color: oklch(0 0 0))❌（Safari/Chrome/Firefox 全部返回 false） - 绝对不要嵌套
@supports not—— 安卓 WebView 解析 bug 会导致整块规则消失 - DevTools 的 computed 面板永远只显示降级后的颜色值，看不到 OKLCH 原始声明是否生效，得靠真实设备验证
最常被忽略的一点：OKLCH 的 L 值不是线性光值，也不是 sRGB 亮度百分比；它是一个无量纲感知标度。所以 calc(100% - var(--bg-l)) 得出的并不是物理意义上的“反色”，而是人眼感知上最不容易疲劳、最易分辨的对比区间——这个区间需要实测校准，不能靠理论推导。
