文章
从图像提取无障碍色彩调色板
一张照片或品牌素材往往包含完整色彩系统的雏形。提取这个雏形，将其塑造成可用的调色板，再根据无障碍标准进行验证，需要三个独立的步骤。本文按顺序介绍每个步骤：调色板提取的底层原理、如何为实际使用选择和调整颜色、如何对照 WCAG 阈值检查对比度，以及如何找出对色盲用户来说会塌陷的色对。
调色板提取的原理：像素采样与颜色量化
每张数字图像都是像素的网格，每个像素在 RGB 等色彩空间中携带一个颜色值。调色板提取器不会逐个检查每个像素：一张 200 万像素的照片包含 200 万个数据点，处理起来会很慢，且会返回数千种细微不同的色调，而不是有用的颜色集合。取而代之的是，工具以固定间隔对像素网格进行采样，收集具有代表性的子集。然后将该子集输入颜色量化算法。最常见的方法是使用聚类算法将相似颜色分组，有时称为中位切割或 k-means 风格分区。算法根据颜色相似度将每个采样像素分配到固定数量的桶中，然后计算每个桶的平均颜色。结果是一个小列表，通常包含 4 到 16 种颜色，共同反映图像中的主要视觉色调。只出现在小块孤立区域的颜色可能被忽略，这是预期行为，不是缺陷。
从原始主色调到可用调色板
调色板提取器的原始输出是按频率排序的颜色列表，但仅凭频率无法构成调色板。一张森林照片会返回多个太过相似、无法在 UI 中用作不同强调色的绿色。实际工作是选择和调整。首先确定一种颜色作为主色：最有特色且最不中性的颜色。从剩余颜色中，寻找最多两种与主色和彼此形成对比的颜色，它们成为强调色。其余颜色，包括提取器通常从阴影和中间色调返回的去饱和色调，可用作背景和边框的中性色。建立好这个粗略结构后，几乎肯定需要调整各个颜色值。color-converter 工具可以以 hex、RGB 和 HSL 格式检查每种颜色。HSL 在这里特别有用：你可以保持色相不变，调整亮度或饱和度，在不改变色相系列的情况下创建更紧凑或更宽松的色彩家族。
检查对比度：可读文本的 WCAG 阈值
确定文本和背景的候选颜色后，需要检查该组合是否可读。网页内容无障碍指南（WCAG）为此定义了对比度。该比率比较两种颜色的相对亮度：1:1 表示完全没有对比（相同颜色叠加），21:1 是最大值（黑色叠加白色）。WCAG 2.1 AA 级要求正常大小正文的对比度至少为 4.5:1，大字号文本（18pt 或 14pt 粗体）至少为 3:1。AAA 级分别设置了更高的阈值 7:1 和 4.5:1。你不需要手动计算亮度。关键是：在良好照明条件下看起来没问题的色对，在屏幕上可能低于 4.5:1，而该指南正是为此场景而存在的。提取和调整颜色后，测试你计划使用的每对文本与背景的组合。在白色背景上读起来清晰的中灰色，在提取调色板中的浅米色背景上可能完全不达标。
色盲模拟：了解色对对受影响用户的外观
大约每 12 名男性中有 1 名、每 200 名女性中有 1 名患有某种形式的色觉缺陷。最常见的类型是绿色觉减退（对绿色敏感度降低），其次是红色觉减退（对红色敏感度降低）。蓝黄色觉减退（对蓝黄色敏感度降低）较为罕见。对于每种类型，视觉系统将某些波长映射到正常视觉者视为不同颜色的相同感知颜色。调色板面临的实际问题是：在正常视觉下看起来明显不同的两种颜色，对色盲用户来说可能塌陷为相同的色调，使其无法用于传达区分信息，例如仅用红色和绿色分别表示成功和错误。运行色盲模拟可以显示受影响通道压缩时调色板的外观。塌陷为近似灰色或棕色的色对需要重新考虑：要么增加它们之间的亮度差异，使对比即使没有色相区分也能保持；要么添加辅助提示（形状、标签、图案），使颜色不再是唯一的信号。
在本地完成：color-palette、color-blindness 和 color-converter
本文描述的三个步骤均可在不将图像或品牌颜色发送到任何服务器的情况下完成。color-palette 工具完全在浏览器中运行：你拖入图像，工具在本地对像素进行采样，并以 hex 值形式返回主色调。不传输任何文件。color-converter 工具接受 hex 代码，并以 RGB 和 HSL 格式显示相同颜色，让你在保持相同色相系列的同时，对亮度或饱和度进行精确调整。hex 值和转换后的值仅存在于页面中。color-blindness 工具的用法正好相反：你拖入一张图像，它会在浏览器中计算并呈现该图像在绿色觉减退、红色觉减退和蓝黄色觉减退模拟下的样子。如果要检验的是一套色板而不是照片，请先把色块导出或截图为一张图像，再拖入模拟器。按顺序使用这三个工具：从图像中提取，在 color-converter 中调整，然后导出色块图像并在 color-blindness 中验证，涵盖了上述完整工作流程。你的图像全程保留在设备上，如果源照片包含未发布的品牌资产或客户尚未公开的身份标识，这一点尤为重要。
本文涉及的工具
常见问题
调色板提取器通常返回多少种颜色？
大多数工具默认返回 5 到 16 种颜色，但许多工具允许你设置数量。返回较少颜色意味着算法需要将更多像素归为一组，这可能会合并本来不同但相似的色调。返回更多颜色可能产生难以明确区分使用的近似重复颜色。对于 UI 调色板，6 到 8 种颜色通常是合适的起点。
从图像提取的调色板能自动满足 WCAG 对比度要求吗？
不能自动满足。照片中的主色调通常是中间亮度，彼此之间的对比度往往在 2:1 到 3:1 之间。满足正文 4.5:1 的阈值通常需要将背景颜色提亮或将文本颜色加深，超出原始提取所能提供的范围。提取给你一个起点，对比度检查告诉你需要调整多少。
WCAG 对比度是否考虑了色盲因素？
部分考虑。WCAG 亮度公式基于相对亮度，而非色相，因此满足 4.5:1 的高对比色对通常对色盲用户也能保持可区分性，因为亮度差异得以保留。然而，亮度相似但色相不同的两种颜色，例如亮度相同的红色和绿色，可能通过亮度对比度检查，但对绿色觉减退者仍无法区分。运行色盲模拟是在对比度之外单独检查色相级别区分性的正确方法。