Leonardo 如何基于对比度生成颜色?

Leonardo 的核心做法是：你不再先挑一个颜色、再去检查它和背景的对比度是否达标，而是反过来，先设定目标对比度，由工具反推出满足该比值的色板。它由 Adobe 开源，面向界面设计和数据可视化的可访问配色系统。如果你需要让一组颜色在浅色、深色、不同亮度下都稳定满足对比度要求，这种生成方式会比手动调色更省事；如果你只是想要一个好看的渐变色，它并不是为此设计的。

生成机制：对比度是输入，不是检查项

传统取色流程是「选色 → 测对比度 → 不达标 → 再调」，Leonardo 把顺序倒过来：

• 你给定一个基准色（例如品牌主色）和目标对比度比值。
• 工具按该比值生成对应色阶，色板天然落在目标对比度上。
• 因此不需要生成后再逐个手动核对对比度。

页面明确说明「色板由目标对比度生成，因此你不再需要手动检查对比度」。同时，每个控制项都配有亮度输入，也就是说你也可以改用目标亮度来定义色板，而不是对比度。这两条路径对应不同的设计习惯：做无障碍界面时用对比度更直接，做视觉层次时用亮度更顺手。

感知均衡的色阶靠色彩空间实现

同样是「从浅到深排 10 个色」，在不同色彩空间里算出来的中间色并不一样。Leonardo 允许你从多种色彩空间中选择，用来创建感知均衡的色阶——也就是相邻色之间的视觉跨度看起来均匀，而不是某些区间挤在一起、某些区间跳得很大。

这对可访问性有实际影响：感知均衡的色阶在切换明暗主题时，颜色之间的关系更可预测，不容易出现「某个色阶在深色模式下突然变得难以辨认」的情况。

自适应主题：一次定义，快速切换明暗

Leonardo 的 adaptive themes（自适应主题）让你在比以往更短的时间内改变亮度、对比度和饱和度。页面用「Dark mode in seconds」来描述这一点。

它的价值在于：你不需要为深色模式重新配一套色，而是在同一套主题参数上调整这三个维度，色板会随之重新生成。对于需要同时维护浅色/深色、甚至多套对比度档位的设计系统，这能显著减少重复劳动。

输出与落地方式

Leonardo 不只是给你看颜色，还提供可直接进入工程和设计流程的产物：

此外，它的 npm 模块可以用于给终端用户提供自适应主题——让用户自己调整整体对比度、亮度和饱和度。这对有低视力需求或偏好高对比度界面的用户是有意义的包容性设计手段。

数据可视化与色盲安全

除了界面配色，Leonardo 也覆盖数据可视化场景：

• 对感知均匀的顺序色阶和发散色阶提供高级控制。
• 自动轮换颜色以生成色盲安全的调色板。
• 高级控制可以显示色差更大的颜色，或只保留满足 3:1 最低对比度的颜色。
• 提供两色对比度检查，支持 alpha 透明度。
• 针对每种色觉缺陷类型，评估两色之间可测量的色差，而不是靠猜。

判断它是否适合你

适合的情况：

• 你的界面或图表需要满足对比度可访问性要求，且颜色数量多、需要成体系管理。
• 你要同时维护浅色/深色模式，或需要让用户自行调节对比度。
• 你需要把配色以 Design Tokens、CSS 变量或 npm 参数的形式交给工程实现。

不太适合的情况：

• 你只需要临时挑一两个颜色，不涉及色阶或主题体系。
• 你的目标纯粹是视觉风格探索，不关心对比度约束。

Leonardo 是 Adobe 的开源项目，想深入了解可以从其 Getting started 部分或 GitHub 入手，Articles 部分还有关于其核心概念的公开文章。