Postmark 团队分享了 Accessible Palette 工具,用于解决颜色系统中的易用性问题。该工具提倡放弃 HSL / HSV 颜色模型,改用CIELAB / Lab* 模型来构建颜色系统,以更好地管理人眼视觉上的亮度问题。
Postmark 团队分享了 Accessible Palette 工具,用于解决颜色系统中的易用性问题。该工具提倡放弃 HSL / HSV 颜色模型,改用CIELAB / Lab* 模型来构建颜色系统,以更好地管理人眼视觉上的亮度问题。
Accessible Palette 是作者基于本次 Postmark 配色重建项目开发并公开的在线工具。它支持以 CIELAB/LCh 色彩空间生成具有一致感知亮度、并能预测 WCAG 对比度的色板,同时兼容品牌色和明暗两种模式。工具会实时更新 URL,便于分享和导出。
WCAG 指 Web Content Accessibility Guidelines,文章重点讨论其 2.1 版对比度计算方法在浅色区域的感知偏差。Accessible Palette 同时提供 WCAG 2.1 与即将到来的 WCAG 3.0 APCA 算法的对比结果,帮助用户兼顾合规与实际可读性。
本文指出 Sketch 作为主流设计工具,尚未支持 CIELAB 或 LCh 色彩空间,无法直接生成感知均匀的色阶,导致设计师难以构建一致的颜色系统。
文章说明sRGB是典型屏幕色域,仅覆盖LCh空间约三分之一。当前CSS受限于此,无法直接使用全部LCh颜色。文中用其解释为何部分LCh组合无法在屏幕上显示。
文中指出CSS目前仅支持sRGB色域,暂无法原生呈现完整LCh色彩。作者提到未来可能支持LCH颜色,并建议用工具生成CSS变量以便在设计系统中使用。
文章表示Figma等主流设计工具尚不支持CIELAB或LCh,仅有LCH色板和Chromatic等插件,但不足以构建灵活的色彩系统。作者因此开发独立工具,并建议将生成的调色板导入Figma库。
文章提到 Adobe XD 同样缺乏对 CIELAB 和 LCh 的原生支持,无法满足构建具备恒定明度色板的工具需求,促使作者转向代码实现。
Chroma.js 是本文作者发现的 JavaScript 库,其优秀的 LCh 支持帮助快速生成新色板,作者基于它开发内部工具并最终发布为 Accessible Palette 应用。
文章以 Google Material Design 为灵感,通过 Accessible Palette 生成替代色板,保留原品牌色相与明度层级,同时实现可预测的对比度。
Tailwind CSS 的色板被用作示例,Accessible Palette 根据其明度值重新生成了一套替代方案,证明工具可灵活适配现有设计系统。
APCA 是文章重点介绍的感知对比算法,Accessible Palette 默认采用其计算结果,解决了 WCAG 2.1 线性公式在明暗区域的感知偏差问题,推荐 60 分作为可读文本阈值。
RGB 是显示设备底层使用的色彩模型,文章将其视为 HSL、HSV 的基础,但强调其数值变化与人眼感知不一致。重建后的 Postmark 色板改用 CIELAB/LCh 空间,以弥补 RGB 在亮度一致性上的缺陷。
文章介绍CIELCh是CIELAB的圆柱坐标表示形式,用Chroma(饱和度)和Hue替代a*、b*,Lightness保持不变。它能生成明度一致的色阶,适合构建设计系统。文中强调其色相角度与HSL不同,且部分LCh值对应不可能色。
文中简要提及HCL(即LCh(uv))作为CIELCh的变体,其Chroma在0-100的均匀尺度上变化,与LCh(ab)不同。它同样基于感知均匀空间,被视为HSL之外的备选方案,用于色彩系统构建。
本文指出CIELAB(又称Lab*)是1976年CIE定义的感知均匀色彩空间,其Lightness分量更贴合人眼感知,能覆盖全部可见色域。文章对比HSL,说明它解决了颜色明度不一致的问题,可用于构建可靠的色彩系统。文中还提到a和b轴分别对应绿-红与蓝-黄对立色。
HSV(色相、饱和度、明度)与 HSL 同为 RGB 的早期近似模型,同样忽略人眼感知特性。文章指出两者在构建系统化色板时均不适用,仅适合单色挑选。
HSL(色相、饱和度、亮度)是文章批判的主要对象,它仅为 RGB 的简单数学变换,无法反映人眼对亮度的真实感知。Postmark 旧版色板因使用 HSL,导致蓝红明显偏暗、黄绿偏亮,且相邻色阶对比度不可预测。
本文中提到,Andrew Somers于2019年在W3C GitHub发起讨论,指出WCAG 2.1对比度算法存在感知偏差问题。他提出APCA算法,现已纳入WCAG 3工作草案,并开发了APCA对比度计算器。该算法被Accessible Palette工具采用,以更准确地评估文本可读性。
Postmark 是文章作者所在团队的设计系统,其原有配色系统存在感知亮度不一致和对比度不可预测的问题。作者以此为案例,重建了新配色系统,并将生成的 Postmark 新色板作为 Accessible Palette 工具的实际应用示例展示。
Wildbit是本文发布方,其团队在重构Postmark配色系统时,发现HSL模型缺陷并开发Accessible Palette工具。他们通过内部使用和公开分享,将该工具作为Labs项目推出,旨在帮助设计师构建一致且符合无障碍标准的色彩系统。
可左右滑动查看