无障碍色彩系统
目的
无障碍色彩系统技能提供了一种创建调色板的方法论，使其在视觉上协调且功能上无障碍。它超越了美学上的颜色选择，构建了一个包含色阶、对比度安全配对和语义化应用的结构化系统，确保所有用户（包括视觉障碍者）都能感知内容。
使用场景
- 为新品牌的数字色彩体系建立基础。
- 审计并修复现有网站中与颜色相关的无障碍问题。
- 设计深色/浅色模式主题。
- 定义用于反馈的语义颜色（成功、错误、警告）。
何时不应使用
- 艺术驱动型体验： 当颜色纯粹用于表达，不承载功能信息时（但仍鼓励实现无障碍）。
- 硬编码的遗留应用： 技术债务导致无法实施变量系统时（应专注于局部修复）。
- 纯装饰性元素： 不包含文本或交互组件的背景图案等元素（WCAG 1.4.3 不适用）。
输入
要生成无障碍色彩系统，您需要：
- 主要品牌颜色： 标识品牌的核心颜色（例如 #0055FF）。
- 中性色基准： 灰色/黑色的起点（例如 #1A1A1A 或带色调的中性色）。
- 无障碍目标： WCAG 等级 AA（标准）或 AAA（增强）。
- 使用上下文： 是高密度仪表盘、营销着陆页还是实用优先应用？
输出
- 色阶： 主要、次要、中性色和语义颜色的色调调色板（通常为 10 级色阶）。
- 对比度矩阵： 显示哪些前景色可以安全地用于哪些背景色的映射表。
- 语义映射： 定义颜色的角色（例如
--color-action-primary、--color-surface-muted）。 - CSS 自定义属性： 可直接用于生产的 CSS 变量块，可选地使用
color-mix()从单个基础令牌派生悬停/激活色调，而不是为每个状态颜色手动挑选。
工作流程
1. 生成色调色阶
将基础颜色扩展为色阶（例如 50 到 900）。使用能够保持亮度步长一致的工具或公式。在 OKLCH 色彩空间（而非 HSL）中工作，可以产生跨色调更均匀的感知亮度步长，从而在测试前更容易预测对比度。提示：确保您的 Primary 500 或 600 是“品牌”版本。
2. 定义中性色
创建中性色色阶。考虑用少量（例如 2-5%）的主色为中性色“着色”，以创造更协调的外观。
3. 建立语义角色
将颜色分配给功能角色：
- 操作： 按钮、链接和活动状态使用的主要颜色。
- 表面： 背景、卡片和分隔线（中性色）。
- 内容： 文本和图标（高对比度中性色）。
- 状态： 成功（绿色）、警告（黄色/橙色）、错误（红色）、信息（蓝色）。
4. 进行对比度验证
使用 WCAG 公式（1.4.3、1.4.11）测试配对：
- 正文文本： AA 级 4.5:1，AAA 级 7:1。
- 大文本（>18pt）： AA 级 3:1，AAA 级 4.5:1。
- UI 组件/图标： AA 级 3:1（非文本对比度，1.4.11）。
- 焦点指示器： 与相邻颜色为 3:1，且指示器不得被粘性页眉或其他内容遮挡（WCAG 2.2 SC 2.4.11，焦点未被遮挡）。
5. 创建配对规则
记录哪些文本颜色可以用于哪些背景。示例：白色文本（#FFFFFF）仅在 Primary 600 或更高色阶上安全。
决策规则
- 可读性优先： 功能（可读性）始终压倒美学。如果品牌颜色对于文本来说太浅，则使用较深的变体用于文本，同时将品牌颜色保留给装饰元素。
- 避免仅用颜色： 绝不依靠颜色作为传达信息的唯一方式（例如，在错误消息中包含图标或文本标签）。
- 一致的亮度： 在同一色阶级别上，保持不同色调的亮度值相似（例如，Red 500 和 Blue 500 应具有相似的感知亮度）。
约束
- 响应性： 在移动屏幕（强光或低质量显示器可能会降低可见性）上，颜色必须保持对比度。
- 无障碍性： 所有功能元素必须至少满足 WCAG 2.2 AA 标准，包括 2.4.11 要求（焦点指示器保持可见且不被遮挡）。
- 层次结构： 使用颜色饱和度和对比度引导视线；更重要的元素（CTA）应具有更高的视觉权重。
常见失败模式
- 对比度不足： 在白色背景上使用浅灰色文本，或在浅色品牌颜色上使用白色文本。
- 振动色： 配对高饱和度颜色（如红色和绿色），导致视觉疲劳。
- 颜色过多： 造成“彩虹”效果，稀释品牌识别度并混淆层次结构。
- 语义误用： 将“错误红色”用于装饰元素，导致用户焦虑。
验证标准
- 每个功能性文本元素与背景的对比度至少为 4.5:1。
- UI 组件（边框、图标）的对比度至少为 3:1。
- 系统包含主色和中性色的清晰色阶。
- 信息从不通过颜色单独传达。
- 系统使用 CSS 自定义属性进行文档化以确保可移植性。