oklch 能构建品牌与无障碍双达标色彩系统，但须放弃数值平移、采用感知校准+结构兜底；否则对比度不达标、禁用态发灰。设计稿理论值在真实场景中因人眼感知、oled色相偏移、浏览器插值限制等问题易翻车，需真机验证、分模式调参。
OKLCH 能建出真正符合品牌+无障碍双重要求的色彩系统，但前提是放弃“数值平移”思维，改用感知校准+结构兜底——否则你只是把 HSL 换了个函数名，对比度照样不达标、禁用态照样发灰。
为什么直接套设计稿 OKLCH 值会翻车
设计工具（如 Figma 插件）输出的 oklch(60% 0.28 258.5) 是基于理想色域和标准视距的理论值，而真实场景中：人眼对蓝紫系（H 在 240–300 区间）在低 C 下明度塌缩明显；OLED 屏幕在 L oklch(32% 0.03 270) 在浅灰背景上对比度仅 3.1:1，远低于 4.5:1 要求。
- 必须用 Chrome DevTools 的「Contrast」面板或 axe DevTools 插件逐组件验证，不能只信设计稿数值
- 同一
L值下，H= 270（蓝紫）比H= 120（绿）视觉更暗，需单独调高L或C - 禁用态不能简单
opacity: 0.5或降L，要固定L和H，只压C到 ≤ 0.008，否则文字糊成一片
@supports 降级结构必须严格满足三要素
旧浏览器（如 Android WebView、Chrome 110 及更早）遇到不支持的 oklch() 会静默跳过整条声明，UI 直接变透明或继承默认色——这不是 bug，是规范行为。唯一可靠兜底方式是 @supports + 外部 fallback 的组合，且顺序、语法、格式缺一不可。
- fallback 必须写在
@supports块外部且正上方：color: #1e293b;→ 紧接着@supports (color: oklch(0% 0 0)) { color: oklch(22% 0.02 55); } - 检测值必须带单位：
@supports (color: oklch(0% 0 0))✅，@supports (color: oklch(0 0 0))❌（Chrome/Safari 拒斥） - 绝对禁用
@supports not：安卓 WebView 解析该语法会崩溃整块 CSS 规则 - fallback 值只能用广泛支持格式：
rgb(30, 41, 59)、#1e293b、hsl(216, 39%, 17%)，禁用oklch(22% 0.02 55 / 0.9)或带 alpha 的 hex
深色模式与高对比模式要分策略调参
OKLCH 的优势是 L/C/H 分工明确，但“一致”不等于“统一调参”。Windows 高对比主题、macOS Increase Contrast 会强制覆盖所有 CSS 颜色，你的 OKLCH 主题必须预留 fallback 路径，且三类模式参数逻辑完全不同。
- 深色模式：固定
H和C，只调L—— 例如oklch(96.8% 0.018 80)（奶油白）→oklch(14% 0.018 80)（暖灰黑），避免L降到 5% 以下导致 OLED 黑场失真 - 高对比模式：禁用所有
C，强制C: 0，只保留L和H，例如oklch(22% 0 55)→oklch(92% 0 55)，确保文字与背景纯灰阶反差 - 禁用态：固定
H和L，只降C——oklch(22% 0.02 55)→oklch(22% 0.005 55)，同时降L会导致浅背景上文字可读性崩塌
渐变与衍生色必须绕开浏览器 sRGB 强制插值
现行 CSS 渐变规范强制所有 linear-gradient() 使用 sRGB 插值，即使起止色都写 oklch()，中间色也会被拉进灰紫/灰绿区。色相差 >180° 时（如 oklch(0.7 0.25 350) → oklch(0.7 0.25 10)），浏览器按长弧插值，出现难看断层。
- 唯一能启用 OKLCH 插值的是
color-mix()，需两端同为oklch()格式，且仅 Chrome 112+/Safari 17.5+ 支持：color-mix(in oklch, oklch(0.6 0.25 240), oklch(0.9 0.25 240)) - 兼容旧环境时，用停靠点压缩跨度：
linear-gradient(to right, oklch(0.3 0.25 240) 0%, oklch(0.55 0.24 242) 48%, oklch(0.9 0.25 240) 100%)，中间色选感知中位而非数值中位 - 从主色衍生互补色，用
hsl(from var(--primary) calc(h + 180) s l)更稳妥，oklch()衍生目前无原生支持，强行算H ± 180易因色域压缩失真
最常被忽略的一点：OKLCH 不是“开了就自动无障碍”，它的价值全系于你是否愿意放弃数值直觉，转而用实测对比度、设备真机预览、逐模式手动调参来校准每一处 L/C/H。一个按钮的悬停态，可能需要三组独立 OKLCH 值分别适配浅色、深色、高对比模式——没有捷径，只有结构兜底+感知校准+真机验证这三条路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
