OKLCH 色彩空间的工程优势：均匀感知亮度与无障碍对比度计算

OKLCH 色彩空间的工程优势均匀感知亮度与无障碍对比度计算一、当 WCAG 说你的一等按钮对比度为 4.3:1 但设计师坚持它颜色分明——谁对答案是你们都对。WCAG (Web Content Accessibility Guidelines) 用 RGB 空间的对比度公式(L1 0.05) / (L2 0.05)计算出了 4.3:1低于 AA 标准的 4.5:1。但人眼的亮度感知不是线性的——RGB 空间的亮度和人类视网膜上锥体细胞感受到的明暗完全是两个世界的度量。OKLCH 色彩空间的诞生就是为了解决这个根本矛盾用与人类视觉感知一致的坐标系来描述颜色让明度在数学上就是人眼看起来有多亮。在工程上这意味着你可以像操作 HSL 一样直观Lightness/Chroma/Hue但 Lightness 通道的值终于可以和 WCAG 对比度、无障碍要求之间建立可靠的数学映射。不再需要用试出一个看起来够用的对比度——直接算。二、从 sRGB 三角到感知均匀的 OKLCH 圆柱2.1 sRGB 与 HSL 的假亮度HSL 中的 L 是对 sRGB R/G/B 三通道取平均(max min) / 2。这个值与颜色实际在人眼中的感知亮度相差甚远。例如 HSL(120, 100%, 50%) 的纯绿色和 HSL(240, 100%, 50%) 的纯蓝色在 HSL 的坐标系中亮度相同但人眼对绿色的感知亮度远高于蓝色——大约是 3 倍的差异。flowchart LR subgraph sRGB 空间非均匀感知 S1[#00FF00 纯绿br/HSL亮度: 50%] -- S2[人眼感知亮度: ≈ 72%] S3[#0000FF 纯蓝br/HSL亮度: 50%] -- S4[人眼感知亮度: ≈ 7%] end subgraph OKLCH 空间均匀感知 O1[#00FF00 纯绿br/OKLCH Lightness: 0.87] -- O2[人眼感知亮度: ≈ 87%] O3[#0000FF 纯蓝br/OKLCH Lightness: 0.45] -- O4[人眼感知亮度: ≈ 45%] end S2 -.-|同亮度错觉| S4 O2 --|真实差异| O4OKLCH 用 Oklab 颜色立方体的极坐标投影来组织颜色L 通道用 Stevens 幂律校正实际是修改后的 cube-root 变换直接对应感知亮度CChroma表示色彩的鲜艳程度HHue表示色相角度。比 HSL 好用在哪里HSL 只能调同色相不同深浅OKLCH 可以调同感知亮度不同艳丽度——这才是设计系统做深浅模式切换light/dark mode时真正需要的语义操作。2.2 OKLCH L 值到 APCA 对比度的可靠映射APCAAdvanced Perceptual Contrast Algorithm是 WCAG 3.0 计划取代旧 4.5:1 公式的新算法。它直接使用感知亮度差来计算对比度得分范围从 0 到 108-108 到 0 表示暗色文字在亮色背景上。OKLCH 的 L 值已经是以感知亮度为标尺所以 OKLCH L-to-APCA 的映射是一个简洁的二次变换而不需要像 sRGB 那样先做 sRGB linearization 再套 LMS 权重矩阵。数学关系简化APCA_contrast(textL, bgL) | bgL^0.56 - textL^0.56 | * S(L_diff) boost_factor(textL, bgL)这里bgL和textL直接来自 OKLCH 的 L 通道0-1 范围在 L 通道做了 Oklab 的非线性预处理后剩下的计算比 sRGB→APCA 少了一个线性化步骤和一个 3×3 矩阵乘法。三、OKLCH 颜色工具库感知亮度计算、APCA 对比度与深浅模式色板生成/** * OKLCH 工程工具库 * 提供感知亮度计算、APCA 对比度评估、深浅主题色板自动生成 */ import culori from culori; // ─── 类型定义 ────────────────────────────────────────── interface OKLCH { l: number; // 感知亮度 0-10纯黑1纯白 c: number; // 色度/鲜艳度 0-0.37sRGB 色域内的最大值 h: number; // 色相角度 0-360 } interface APCAResult { /** 对比度得分。正值浅色背景深色文字负值深色背景浅色文字 */ score: number; /** WCAG 3.0 等级light(15), silver(15-29), gold(30-44), platinum(45-59), diamond(≥60) */ level: string; /** font-size 下限推荐 */ fontFloor: number; } // ─── 1. 感知亮度计算 ─────────────────────────────────── /** * 从 sRGB HEX 中提取 OKLCH L 值感知亮度 * * 这个值可以直接用于排序颜色序列、判断某颜色是深色还是浅色、 * 决定文字用白色还是黑色——不会像 sRGB 的 relative luminance 那样 * 把深蓝误判为够浅。 */ function getPerceivedLightness(hex: string): number { // culori 内部做了 sRGB → Linear sRGB → Oklab → L 提取 const oklch culori.oklch(hex); return oklch.l; } /** * 判断一段文字在当前背景色上应该用白字还是黑字 * * 阈值为 0.53来自人眼对够黑 vs 够白的分界点测试 * param bgHex 背景色 HEX如 #3B82F6 * returns white 或 black */ function textColorForBackground(bgHex: string): white | black { const l getPerceivedLightness(bgHex); return l 0.53 ? black : white; } // ─── 2. APCA 对比度计算基于 culori 的 Oklab 数据 ──── /** * APCA 对比度计算WCAG 3.0 草案方法 * * 与旧 WCAG 2.x 公式的核心差异 * - 不再使用 (L10.05)/(L20.05) 的固定偏移 * - 直接使用感知亮度差做幂律变换 * - 引入了 font-size 对可感知对比度的影响大字号更容易看清 * * param textHex 文字色 HEX * param bgHex 背景色 HEX * param fontSize 字号px影响可读性阈值。18px 及以下用小字号阈值 */ function apcaContrast( textHex: string, bgHex: string, fontSize: number 14 ): APCAResult { // 提取感知亮度0-1 const textL getPerceivedLightness(textHex); const bgL getPerceivedLightness(bgHex); // 确保 text 和 bg 的亮度有序谁亮谁暗 const lighter Math.max(textL, bgL); const darker Math.min(textL, bgL); // APCA 幂律变换核心 // 使用 0.56 指数是因为这个指数最接近人眼对比度敏感度曲线 const score (Math.pow(lighter, 0.56) - Math.pow(darker, 0.56)) * 100; // 如果文字比背景亮深色模式取负值 const signedScore textL bgL ? -(score) : score; // 等级划分WCAG 3.0 推荐阈值 const absScore Math.abs(signedScore); let level: string; let fontFloor: number; if (absScore 60) { level diamond; fontFloor 12; } else if (absScore 45) { level platinum; fontFloor 14; } else if (absScore 30) { level gold; fontFloor 16; } else if (absScore 15) { level silver; fontFloor 18; } else { level light; // 不通过 fontFloor 24; } return { score: Math.round(signedScore), level, fontFloor }; } // ─── 3. 深浅模式色板自动生成 ────────────────────────── /** * 在 OKLCH 空间内沿 L 轴等距生成色阶 * * 为什么不能用 HSL 做 * HSL 调 L 时颜色饱和度会意外变化蓝色变灰黄色几乎不变。 * OKLCH 只调 L 而 C 和 H 不变→真正的同色相不同深浅。 * * param baseHex 基准色 HEX * param lStops L 停止点数组例如 [0.98, 0.85, 0.65, 0.45, 0.30, 0.15] * 0.98≈极浅背景色0.30≈深色主色0.15≈极深强调色 */ function generateLightnessScale( baseHex: string, lStops: number[] [0.98, 0.85, 0.65, 0.45, 0.30, 0.15] ): string[] { const base culori.oklch(baseHex); return lStops.map(l { const color culori.formatHex({ ...base, l }); return color; }); } /** * 为深色模式dark mode翻转色板的 L 轴顺序并调整色度 * * 深色模式下高色度颜色太过刺眼人类瞳孔在暗环境下对饱和颜色更敏感 * 需要同时降低色度C。OKLCH 可以独立调 C 而 L 和 H 不变→干净的主题切换。 * * param lightTokens 浅色模式色阶 HEX 数组最浅→最深 * returns 深色模式色阶 HEX 数组对应位置适配深色背景 */ function flipToDarkMode(lightTokens: string[]): string[] { // 浅色模式的最浅色如 bg-surface映射到深色模式的最深色bg-surface // 色度降到原来的 60%-70%让暗背景上的颜色看起来柔和 return lightTokens.map((hex, i) { const color culori.oklch(hex); // 反转 L最浅→最深、最深→最浅保持中间调在中间 const flippedL 1 - color.l; // 降低色度越靠近中间调降幅越大 const chromaReduction 0.6 0.1 * (1 - Math.abs(i - 2.5) / 2.5); return culori.formatHex({ ...color, l: flippedL, c: color.c * chromaReduction, }); }); } // ─── 4. WCAG 合规性一键检查 ─────────────────────────── interface ContrastViolation { element: string; // 元素描述 currentScore: number; // 当前 APCA 得分 requiredLevel: string;// 所需等级 suggestion: string; // 修复建议将 XX 色改为 YY 色 } /** * 给出两个颜色自动搜索达到目标对比度的 OKLCH L 值 * * 核心思想在 OKLCH 空间中保持色相 H 和鲜艳度 C 不变 * 只调整感知亮度 L → 精确控制对比度变化颜色外观变化最小。 * * param textHex 需要调整的文字色 * param bgHex 不变的背景色 * param targetLv 目标等级gold/platinum/diamond * param direction darken让文字更深| lighten让文字更浅 */ function optimizeContrast( textHex: string, bgHex: string, targetLv: string gold, direction: darken | lighten darken ): string | null { const targetMin { gold: 30, platinum: 45, diamond: 60 }[targetLv] || 30; const base culori.oklch(textHex); // 用二分搜索找到恰好满足目标对比度的 L 值 let lo direction darken ? 0 : base.l; let hi direction darken ? base.l : 1; let bestL base.l; for (let iter 0; iter 20; iter) { const mid (lo hi) / 2; const testHex culori.formatHex({ ...base, l: mid }); const result apcaContrast(testHex, bgHex); const absScore Math.abs(result.score); if (absScore targetMin) { bestL mid; if (direction darken) hi mid; else lo mid; } else { if (direction darken) lo mid; else hi mid; } } if (bestL base.l) return null; // 无法达到目标对比度 return culori.formatHex({ ...base, l: bestL }); } // ─── 使用示例 ───────────────────────────────────────── // const blue #3B82F6; // const lights generateLightnessScale(blue); // // [#eef2ff, #c7d2fe, #8b9cf6, #3b65e0, #1e3a8a, #172554] // const darks flipToDarkMode(lights); // // 深色模式对应色阶 // const c apcaContrast(#64748B, #FFFFFF, 14); // // { score: 60, level: diamond, fontFloor: 12 } → 通过 // const c2 apcaContrast(#94A3B8, #FFFFFF, 14); // // { score: 45, level: platinum, fontFloor: 14 } → 正文通过小字不行 // const fixed optimizeContrast(#94A3B8, #FFFFFF, diamond); // // #64748B → 自动找到了可用颜色四、边界分析OKLCH 在生产中还没解决好的问题4.1 色域裁剪Gamut Clipping是最大的工程坑OKLCH 模型定义的颜色理论上可以是任何人类可感知的颜色。但显示器sRGB 色域只能显示其中大约 35%。CSS Color Level 4 规范中的oklch()函数会自动把超出色域的 CChroma值裁剪到就近 sRGB 边界。这导致一个问题你设置了一个看起来合理的 C0.25在某些色相H 在 120°-180° 附近即绿色到青色区会被裁剪颜色变得比你预期的灰。没有 lint 规则能在写 CSS 时提醒你这个值会被裁剪——目前只能靠 devtools 的颜色选择器肉眼确认。4.2 浏览器支持度不是 100%oklch()CSS 函数的 Can I Use 数据截至 2025 年中Safari 16、Chrome 111、Firefox 113。全球覆盖率 ≈ 92%。如果你需要支持 92% 以下的用户群体例如某些企业客户的 ESR Firefox 或 Android WebView必须在构建阶段用 PostCSS 插件如 postcss-oklab-function把oklch()降级到rgb()。降级过程引入一次色彩空间变换误差可能让精确计算的 APCA 对比度在实际渲染时和理论值偏差 1-2%。4.3 APCA 方案的字体粗细影响未被纳入简化实现完整 APCA 规范考虑了字体粗细normal400 和 bold700 有不同阈值。上面的简化实现只考虑了字号没有区分粗细。如果你的设计系统用细字体做正文如 300 weight实际可读对比度会比apcaContrast()返回的值低。标准建议是把细字体的得分要求提高一级例如原本 gold 就够的现在要 platinum。4.4 深浅主题色板的反转后不可用问题flipToDarkMode()反转 L 值时某些色相在低 L 区深色会损失色相辨识度——例如棕色和深红色在 L0.2 时人眼几乎分不出来。这不是算法的 bug是人眼在暗环境下的生理限制。深色模式 Token 必须由人工从算法结果中二次筛选。适用边界OKLCH 最佳应用于设计 Token 的生成、无障碍对比度的精确计算、深浅模式色板的自动推导、CI 中的色彩合规检查。不适合直接作为 3D 渲染、印刷设计印刷用 CMYK、图像颜色空间转换的后端格式仍需 ICC Profile。五、总结OKLCH 将颜色的明暗从 HSL 的假亮度中解放出来L 通道与人类视网膜感知亮度直接映射 |getPerceivedLightness()用 culori 直接从 sRGB HEX 获取 OKLCH L 值0-1比 sRGB relative luminance 更准确 | APCA 对比度公式在 OKLCH 的预处理下计算步骤更少不需要 sRGB linearization 和 LMS 权重矩阵直接对 L 值做 0.56 幂律变换 |apcaContrast()返回 APCA score等级light/silver/gold/platinum/diamond推荐最小字号 | OKLCH 独立操纵 L/C/H 三个通道generateLightnessScale()沿 L 轴等距取色不改变色相和鲜艳度 |flipToDarkMode()反转 L 轴 降低 C 生成深色模式色板解决了暗环境下高饱和度刺眼的问题 |optimizeContrast()在 OKLCH 空间内对 L 值做二分搜索自动找到满足目标对比度的最近可用颜色 | OKLCH 的色域裁剪gamut clipping导致超出 sRGB 色域的 C 值被静默裁剪是目前最大的工程坑需要 devtools 肉眼确认或 bulid-time 降级检测 |oklch()CSS 函数覆盖率约 92%低覆盖率场景需 PostCSS 降级 | OKLCH 不适合印刷/3D 渲染/图像色空间转换最适合设计 Token 生成、无障碍对比度计算、深浅模式推导、CI 合规检查四个场景。