对比度生成色阶

大理论

颜色系统有两层问题：色阶是否满足对比度，token 是否表达用途。Leonardo 这类工具能把 contrast ratio 作为生成起点，但 agent 仍需要把输出翻译成 text、muted、surface、border、focus、danger、success 等语义角色。

小知识点

1. 用目标对比度生成浅色和深色模式色阶，可以减少后期补丁式修色。
2. 生成色阶不是最终设计系统；仍需命名、压缩、去重和场景验证。
3. 状态色不能只靠 hue 区分，还要补充 icon、文字、边框、pattern 或 layout 反馈。
4. 品牌主色如果无法满足文本对比，可用于背景、边框或装饰，不应强行用于正文。

设计判断

如果一个颜色 token 名字只描述色相，例如 blue-500，它无法告诉组件何时使用；如果它描述语义，例如 accent-bg、accent-text、focus-ring，则更适合跨主题复用。

实现建议

先用工具生成候选色阶，再建立语义映射表：背景、正文、弱文本、分隔线、主行动、危险、成功、警告、焦点和选中。每个映射写明浅色值、深色值、最低对比度目标和禁用场景。

反例/风险

算法输出 12 个蓝色阶后全部暴露给组件、深色模式只是反转亮度、把品牌橙用于小字号白字按钮、数据图表只用红绿区分。

案例分析

Adobe Leonardo 的项目说明把 desired contrast ratio 作为生成颜色的核心，并说明目标是帮助设计师和工程师以 contrast ratio 作为起点来符合 WCAG minimum contrast standards。可学习点是：对比度应进入 token 生产流程，而不只是发布前检查清单。

来源链接

Leonardo: https://leonardocolor.io/ Adobe Leonardo GitHub: https://github.com/adobe/leonardo WCAG 2.2: https://www.w3.org/TR/WCAG22/