无障碍颜色系统设计工具

目标与适用范围

通过颜色转换、配色生成、对比度与色觉检查，建立可复用的颜色系统并记录设计令牌。
本指南将当前任务范围转化为可复核的交付结果。请保留源文件、中间产物和关键判断，让后续协作者能够理解检查了什么以及为什么这样处理。

准备证据并作出选择

• 收集源颜色并分配预期角色。

• 明确文本、背景、交互、状态和导出要求。

• 决策点: 选择哪种颜色关系？. 按角色选择类似、互补、三角色、四色或分裂互补关系。

• 决策点: 调整什么属性？. 仅在语义角色仍清晰时调整明暗、阴影、色调、饱和度、色相或色温。

• 决策点: 哪些组合必须通过？. 检查关键组合和整体调色板的对比度及色觉差异。

按步骤完成工作流

1. 统一源颜色

转换源值并在修改前记录名称、角色和原始值。 使用 color-converter.

2. 生成并筛选候选值

生成配色、混色、渐变和明暗变体，只保留符合语义角色的候选值。 使用 color-scheme-generator, color-complement, color-triad, color-tetrad, color-analogous, color-split-complement, color-mixer, color-gradient-generator, color-lighten-darken, color-saturate-desaturate, color-hue-shifter, color-shade, color-tint, color-temperature.

3. 验证可读性与色觉

检查前景背景组合、整体对比度和色觉模拟。 使用 color-contrast-checker, color-accessibility-checker, accessible-color-palette-contrast-checker, color-blindness-simulator.

4. 处理失败并记录令牌

调整或反转失败状态，记录值、角色、证据和渐变色标。 使用 color-inverter, color-lighten-darken, color-shade, color-tint.

交付前验收结果

• 每个颜色都有稳定值和语义角色。
• 文本与交互组合达到适用的对比度目标。
• 调色板在相关色觉模拟下仍可区分。
• 渐变具有明确色标或来源规则。
• 记录令牌名称、值、角色、对比度证据和回退方案。

常见问题

• 应先生成调色板再查对比度吗？ 应先生成候选值，再由对比度和色觉检查决定其角色。
• 好看的配色也会不符合无障碍吗？ 会；文本、图标、控件和状态都应分别检查。
• 流程会导出什么？ 流程提供令牌所需的值和文档，名称与语法由目标系统定义。