Inclusive Colors

Inclusive Colors 是一款处于 Beta 阶段的无障碍色板编辑器，目标不是从一个品牌色自动吐出“正确答案”，而是让设计师同时调整多组浅深色阶，并立即看到不同前景与背景组合的对比结果。它适合在设计系统早期建立可交付色板，而不是等页面完成后逐个修补不合格色值。

先按界面角色规划色阶

打开工具后，不要只围绕 Logo 主色生成一列深浅值。先列出项目真正需要的角色：页面背景、表面层、正文、次级文字、边框、链接、主按钮，以及成功、警告和错误状态。每个角色还要考虑默认、悬停、按下、禁用和焦点；否则导出的色板即使颜色很多，也无法直接映射到组件。

1. 建立中性色、品牌色和必要的状态色，并同时观察它们放在一起是否协调。
2. 用右侧正文、链接、按钮或表单示例检查实际前景与背景组合。
3. 先确定正文和关键操作的安全组合，再为装饰色保留更大的创作空间。
4. 把通过的色值映射为 text-primary、surface、action 等语义令牌，而不是让业务代码长期依赖 blue-700。

HSLuv 让调色与亮度分工更清楚

Inclusive Colors 的选择器使用 HSLuv。官方解释是：改变色相和饱和度时，感知亮度能保持得更稳定，因此可以先在相近亮度下探索不同色相，再单独调整亮度解决对比问题。普通 HSL 中，色相或饱和度变化也可能明显改变视觉亮度，使同一数值级别的黄色和蓝色看起来并不等重。

这项特性减少的是调色过程中的干扰，不代表同一色阶编号天然适用于所有文字。字号、字重、前景与背景顺序，以及浅色或深色主题，都会改变可读性判断。

WCAG 2 与 APCA 不能混成一个“通过”标签

工具允许从 Contrast 菜单切换两种方法。APCA 在深色主题和较小文字上可能给出比 WCAG 2 更严格的结果；它是 WCAG 3 的候选方向，而 WCAG 3 仍在开发中。团队应先确定合同或产品采用的正式标准，再把另一种结果作为补充信号，不能为了获得绿色状态来回切换算法。

导出文件要经过一次设计—代码对账

面向代码可导出 CSS 变量和 Tailwind 配置；面向设计系统可导出 Design Tokens Community Group（DTCG）格式，并通过兼容插件导入 Figma；Adobe、Affinity Designer、Procreate 等可使用 ASE，SVG 或 PNG 则适合作为视觉样张。交付时应同时保存原始色板和语义映射，避免设计稿、令牌文件与线上 CSS 各用一套名称。

• 在至少一个真实页面验证正文、按钮、表单错误、禁用和焦点状态。
• 分别检查亮色与暗色主题，不把颜色顺序颠倒后的结果视为相同。
• 测试常用字号、字重、缩放和强光或低亮度设备环境。
• 确认导出后色值、透明度和令牌名称没有被插件或构建流程改写。

对比计算只能证明特定颜色组合满足某种数学条件，不能替代键盘、读屏、非颜色提示和真实内容测试。工具入口：https://www.inclusivecolors.com/