无障碍调色板生成器，免费

什么是无障碍配色调色板生成器？

无障碍配色调色板生成器是一个帮助您为网站、应用或印刷设计组装一组颜色的工具，其中每对打算一起显示的颜色（背景上的文本、画布上的按钮、字段上的标签）都符合 WCAG 对比度要求。重点是在设计时捕获低对比度组合，而不是在审计时。您将颜色添加到调色板，工具计算每对之间的对比度，并将每对标记为 AAA 通过、AA 通过或失败。您迭代直到每对您实际打算使用的颜色都通过。

对比度是 1:1（相同颜色，不可见）到 21:1（白底黑字）之间的数字。WCAG 2.2 成功标准 1.4.3 要求正文文本标准尺寸 4.5:1（AA 级），大文本（24px+ 常规或 18.66px+ 粗体）3:1，图形元素和 UI 控件 4.5:1（SC 1.4.11）。WCAG AAA 将正文文本提升到 7:1，大文本到 4.5:1。大多数面向公众的网站根据 ADA、EAA、AODA 和类似法律必须至少满足 AA；许多司法管辖区的政府网站必须满足 AAA。

此工具在您的浏览器中运行。您使用颜色选择器选择颜色，工具使用 WCAG 指定的公式计算相对亮度和对比度，网格显示每对的状态。您可以将最终调色板导出为 CSS 自定义属性（var(--brand-primary)）、HEX 列表、Tailwind 配置片段或用于设计令牌的 JSON。没有任何东西被上传；整个调色板保留在您的设备上。

工具内部有什么

工具顶部是颜色选择器加上添加到调色板按钮。选择一种颜色，命名它（品牌主色、表面、正文文本等），然后添加。调色板在左侧增长为色板列表。您可以编辑任何色板、删除它，或拖动以重新排序。预定义的无障碍调色板可作为起点（高对比度对、IBM Carbon 风格的设计调色板、Material Design 3 调色板）；选择一个，然后自定义。

对比度网格采用每对色板，并显示每个 WCAG 级别的对比度加上通过/失败徽章：AA-normal (4.5:1)、AA-large (3:1)、AAA-normal (7:1)、AAA-large (4.5:1)。显示为 4.7:1 的一对通过 AA-normal 但未通过 AAA-normal；显示为 2.1:1 的一对全部失败。悬停在单元格上以将该对预览为实际文本。按比率对网格进行排序，首先发现最差的对。

导出面板按您的工具链期望的方式格式化调色板：现代 CSS 的 CSS 自定义属性，旧管道的 Sass 变量，Tailwind CSS 的 Tailwind 主题配置，跨平台设计系统的 JSON 设计令牌（Style Dictionary、W3C 设计令牌社区组规范），或只是用于粘贴到 Figma 的 HEX 列表。命名约定被保留；您可以直接复制和粘贴到您的代码库中。

历史与背景

CIE 比色法建立科学色彩（1931）

国际照明委员会（CIE）于 1931 年发布了 CIE 1931 色彩空间，这是关于人类如何从电磁光谱感知颜色的第一个正式数学描述。每个现代颜色系统（RGB、HSL、OKLCH、Lab、XYZ）都直接或通过派生转换建立在 CIE 1931 之上。WCAG 用于计算对比度的相对亮度公式是 CIE 派生的计算：它根据人眼对每个通道的反应强度对红色、绿色和蓝色通道进行加权（绿色最多，蓝色最少）。

WCAG 1.0 引入对比度指南（1999）

Web 内容无障碍指南 1.0（W3C，1999 年 5 月）将对比度作为正式无障碍标准引入（检查点 2.2：确保前景和背景颜色组合提供足够的对比度）。第一个版本是定性的；阈值是模糊的。WCAG 2.0（2008 年 12 月）是第一个使用 WCAG 相对亮度公式指定数字对比度的版本。2.0 中的 4.5:1 和 7:1 阈值在 2.1（2018）和 2.2（2023）中保持不变，因为它们平衡了大多数残疾（低视力、与年龄相关的对比度敏感度损失、色盲）的可读性与实际设计约束。

颜色编码设计系统成熟（2014 年起）

Google 的 Material Design（2014）、IBM 的 Carbon Design System（2015）以及设计令牌的更广泛兴起（Salesforce 2014、Atlassian 2016）都将无障碍颜色作为系统级关注点。Material Design 3（2021）引入了色调调色板（每种色调 13 步亮度斜坡），明确设计为亮度刻度 600+ 上的任何色调都通过白色 4.5:1 对比度。这一转变使无障碍默认调色板成为现代设计系统中的标准实践，取代了较旧的品牌优先无障碍其次的方法。

APCA 被提议作为更准确的替代方案（2019 年起）

无障碍感知对比算法（APCA）由 Andrew Somers 从 2019 年开始提议，作为 WCAG 对比度公式的更感知准确的替代品。WCAG 对比度高估了浅色的可读性，低估了深色背景上的深色文本；APCA 纠正了这些。WCAG 3.0（2.x 的草案后继者，多年来一直在开发中）预计将采用 APCA 或类似的改进算法。在 WCAG 3 发布并被法律采纳之前，WCAG 2.x 对比度仍然是法律和行业标准。此工具使用 WCAG 2.x 公式。

设计令牌成为跨平台标准（2020 年起）

W3C 设计令牌社区组于 2020 年成立，旨在标准化设计令牌（命名的颜色、间距、字体值，可跨 CSS、iOS、Android、Figma 和其他平台翻译）。Style Dictionary、Tokens Studio 和新兴的 W3C 规范等工具都依赖于机器可读的令牌格式。无障碍颜色调色板越来越多地作为设计令牌发布，因此相同经过审查的调色板在任何地方使用，消除了网站通过对比度但移动应用未通过的故障模式。

OKLCH 和感知均匀的颜色空间（2020 年起）

CSS 颜色模块 4 级（候选推荐 2024）将 OKLCH、OKLab、Lab、LCH 和其他感知均匀的颜色空间添加到原生 CSS。OKLCH（由 Bjorn Ottosson 于 2020 年引入）对生成无障碍调色板特别有用，因为相等的亮度步长对眼睛看起来相等，与 HSL 不同，HSL 中的亮度步长会产生不均匀的视觉跳跃。现代调色板生成器（Adobe 的 Leonardo、Polychrom、当设置为 OKLCH 输入模式时的此工具）利用这些空间生成视觉上更一致的调色板，在相同亮度水平满足对比度目标。

实用工作流程

设计新的品牌调色板

从必须保留的品牌颜色开始（徽标颜色、营销团队批准的主色）。将其添加到调色板，然后构建色调（较浅的版本）和阴影（较深的版本）以及中性色（白色、表面、表面变体、文本）。检查每个文本-背景对与 AA-normal。如果您的主品牌颜色在白色上失败，您有两个选择：仅将其用于大型元素（徽标、装饰强调）并将正文文本与较深的变体配对，或者稍微妥协品牌颜色。此工具在设计时浮现这些选择。

审计现有站点的颜色决策

从您现有的设计令牌（CSS 自定义属性、Tailwind 配置、Sass 变量）中提取颜色值，将它们输入此工具，并查看对比度网格。常见故障：白色上的灰色文本（通常 #999 或 #aaa，给出 2.8:1 或 2.5:1）、带白色文本的品牌色按钮（按钮为中色调）、忙碌背景上的链接颜色。记录故障及其比率以及它们违反的 WCAG 标准；该文档是补救计划的开始。

为图表和数据可视化选择强调色

对于数据可视化，您需要通过对比度对抗图表背景的强调色，并且对于色觉缺陷用户来说也可彼此区分。将此工具与 ColorBrewer（Cynthia Brewer，Penn State，2002）配对使用，该工具发布的调色板设计为在色盲模拟下保持可区分。通过两种工具运行候选调色板：对比度对抗背景（此工具），调色板颜色之间的可区分性（ColorBrewer 或 Viz Palette）。

为浅色调色板构建深色模式补充

深色模式不仅仅是反转的浅色模式；对比度要求仍然适用，但眼睛对深色上的浅色文本与浅色上的深色文本的感知不同（APCA 辩论很大程度上是关于这个）。将深色调色板构建为命名令牌的并行集（surface-dark、text-dark、accent-dark），并对照 AA 检查每个深色模式对。常见的深色模式故障：纯白色 (#fff) 在纯黑色 (#000) 上会导致光晕（光线渗出），因此设计师经常使用 #e5e5e5 在 #121212 上；这仍然通过 AA 但阅读更舒适。

为不同表面生成调色板变体

现代 UI 有多个表面级别（背景、卡片、卡片提升、模态、弹出窗口）。每个表面应与上面使用的每种文本和强调色正确配对。将每个表面添加为调色板色样，并检查每种文本颜色对每个表面。对比度网格快速显示当文本-卡片对通过时您的文本-模态对是否失败（模态通常具有略有不同的背景色调以指示提升，这可能会使对比度下降到 AA 以下而您没有注意到）。

用于法律或审计提交的合规文档

对于 ADA 或 EAA 合规文档，您通常需要证明设计系统中的每种颜色组合都通过相关的 WCAG 级别。将调色板加上对比度网格导出为产品无障碍声明或 VPAT（自愿产品无障碍模板）的一部分。导出的 JSON 结构足以提供给自动化合规报告；视觉网格适合人工审查。

常见陷阱

将品牌颜色视为不可触碰

最常见的模式：营销坚持公司主色，但它在白色上未通过 AA 对比度。选项：仅将品牌颜色用于大型或装饰性元素（通过更宽松的 3:1 大文本栏）、稍微加深颜色以用于文本（大多数品牌对较深的变体有灵活性）、或将正文文本颜色从黑色更改为不那么刺眼的深灰色，以便品牌颜色读起来作为强调。Leonardo（Adobe 的）等工具自动生成品牌颜色的无障碍变体；将它们与此工具配对进行验证。

使用对比度作为唯一的无障碍检查

通过对比度并不能保证可读性。4.5:1 比率是底线；某些用户（低视力、与年龄相关的对比度敏感度损失、阅读障碍）受益于更高的比率。WCAG SC 1.4.6（增强对比度，AAA）正是因为 4.5:1 是最小值而不是目标值，所以建议正文文本为 7:1。结合高对比度与足够的字体大小（正文 16px+）、足够的行高（字体大小 1.5x）以及保留字母形状的字体选择（避免正文的超细字重）。

忘记非文本对比度（SC 1.4.11）

WCAG 1.4.11（在 WCAG 2.1 中添加，2018）要求 UI 组件和图形元素 3:1 对比度：表单字段边框、按钮轮廓、图标、焦点指示器。这很容易被忽略，因为设计师认为对比度只适用于文本。具有白色上微妙灰色字段边框的干净表单可能未通过 1.4.11，即使所有文本都通过了 1.4.3。审计每个传达含义或状态的视觉元素，而不仅仅是背景上的文本。

误解大文本规则

WCAG 的大文本阈值（3:1 而不是 4.5:1）适用于 18pt 或更大（约 24px）或 14pt 粗体（约 18.66px 粗体）的文本。任何更小的都是正常文本，需要 4.5:1。设计师有时将 3:1 大文本规则应用于所有标题级别，但 16px 的 h5 按 WCAG 的定义是正常文本。检查渲染大小，而不是标题级别。粗体修饰符很重要：18px 粗体作为大文本通过；18px 常规则不通过。

仅依赖颜色传达信息

WCAG 1.4.1（颜色的使用，A 级）与对比度分开。即使具有完美的对比度，您也不能将颜色用作状态的唯一指示器（红色表示无效，绿色表示有效，蓝色表示链接）。将颜色与第二个提示配对：图标（错误的警告三角形）、模式（链接的下划线）或文本标签（强制字段旁边的必需）。色盲用户（约 8% 的男性、0.5% 的女性）和灰度单色屏幕上的用户依赖这些次要提示。

忘记 hover、focus 和 active 状态

按钮在其默认状态下通过对比度，但 :hover 样式将其变亮到阈值以下；:focus 轮廓是微妙的灰色，未通过按钮背景的 3:1；:active 状态反转颜色，新组合失败。在您的对比度网格中测试每个交互状态，不仅仅是默认状态。焦点指示器特别关键（SC 2.4.7 焦点可见，AA）：如果焦点没有清晰可见，仅键盘用户会失去他们在页面上的位置。

隐私和数据处理

您添加的颜色、调色板名称和导出的令牌都保留在您的浏览器中。对比度计算在您机器上的 JavaScript 中运行；没有任何东西被上传。这对颜色调色板的重要性不如对文档那么大，但当调色板是未宣布的品牌刷新或机密客户项目的一部分时仍然重要：您不希望它在发布前泄露到第三方 SaaS 验证器。

页面加载后，该工具离线工作。您可以断开互联网连接、构建调色板、运行检查并导出。导出的令牌通过浏览器的正常保存对话框直接下载。许多云颜色工具（Coolors、Adobe Color，甚至一些无障碍检查器）将调色板存储在服务器端，并可能将它们用于分析或训练；对于机密工作，更喜欢客户端工具。

何时不应使用此工具

对于完整色盲模拟（使用专用工具）

对比度与色盲兼容性不同。调色板可以通过所有对比度检查，但仍然让色盲用户感到困惑（在同一亮度下，红色和绿色对绿色盲来说看起来相同）。对于色盲模拟，使用 Absolutool 色盲模拟器或 Adobe Color 的无障碍视图，两者都应用实际的绿色盲、红色盲和蓝色盲颜色转换。通过此工具和模拟器运行候选调色板。

从头开始生成配色方案（使用 Leonardo 或 Coolors）

此工具检查并审计调色板；它不从单一种子颜色生成它们。对于从头开始的调色板生成（类似、互补、三角、分裂互补方案），使用 Adobe Color、Coolors 或 Leonardo（生成品牌颜色的无障碍变体）。使用这些工具生成，然后用此工具验证。Leonardo 特别生成针对特定对比度比率的颜色，这是此工具验证步骤的自然输入格式。

对于基于 APCA 的对比度（当 WCAG 3 发布时）

此工具使用 WCAG 2.x 对比度公式，这是当前的法律和行业标准。如果您专门需要为 APCA（提议的 WCAG 3 算法）设计，请使用 Myndex Research 的 APCA 对比度计算器。APCA 产生不同的（可以说更感知准确的）评级，特别是对于深色背景上的深色文本和浅色背景上的浅色文本。在 WCAG 3 被批准并被法律采纳之前（可能还需要几年），WCAG 2.x 是合规审计员将检查的内容。

对于完整的 WCAG 审计（使用综合工具）

对比度是众多标准之一。对于完整的无障碍审计，使用 axe DevTools、Lighthouse、WAVE 或付费解决方案如 Tenon 或 PowerMapper。这些工具在一次通过中检查对比度、alt 文本、ARIA、表单标签、焦点顺序、标题结构等。在调色板设计期间使用此工具，在集成测试期间使用综合工具。

更多问题

AA 和 AAA 对比度有什么区别？

AA 是标准，大多数无障碍法律（ADA、EAA、AODA 等）法律要求，每个面向公众的网站都应满足。AAA 更严格：正文文本 7:1，大文本 4.5:1。AAA 通常仅适用于高风险内容（某些司法管辖区的政府网站、医疗和法律信息、面向低视力用户作为主要受众的内容）。为 AAA 设计是限制性的；没有重大颜色限制，很少有品牌能够满足它。默认目标为 AA，在内容受众证明合理的地方为 AAA。

为什么 WCAG 专门使用 4.5:1？

选择 4.5:1 阈值是为了让文本对于具有 20/40 视力（许多司法管辖区法律盲的阈值）的用户在没有辅助放大的情况下保持可读。它也是色觉缺陷用户能够可靠地区分前景和背景的近似对比度。该数字根据视觉研究经验校准；它不是任意的。AAA 的 7:1 大致对应于 20/80 视力，适应明显更多的残疾。

对比度公式如何工作？

通过以下公式将每种颜色从 sRGB 转换为相对亮度：通过应用分段函数（低值线性，高值指数）对每个通道（R、G、B）进行伽马校正，然后按 0.2126 R + 0.7152 G + 0.0722 B（人眼对每个通道的相对灵敏度）加权。两种颜色之间的对比度为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是较浅亮度，L2 是较深的。0.05 偏移量考虑了环境屏幕反射。结果是 1（相同）到 21（最大）之间的数字。

我应该担心表单字段中占位符文本的对比度吗？

是的。占位符文本在 WCAG 下算作文本，必须满足 4.5:1 对比度。占位符的浏览器默认值是浅灰色（大多数浏览器中的 #a9a9a9），它在白色上失败。使用 CSS 覆盖：::placeholder { color: #595959; } 或类似通过 AA 的内容。更好的是，对重要字段完全避免占位符；在字段上方使用可见标签，并为示例格式保留占位符。浮动标签模式结合了可见标签和示例清晰度。

对比度适用于禁用按钮和表单字段吗？

不。WCAG SC 1.4.3 明确豁免禁用控件，因为静音外观本身是控件不可用的视觉信号。禁用按钮通常淡化到大约 38% 的不透明度，按设计在其禁用状态下会未通过对比度。然而，禁用状态仍必须与启用状态清楚区分，因此不要只是删除所有视觉处理；使用清晰的视觉差异加上屏幕阅读器可访问的禁用属性。

图形内容（如图表和图标）的对比度怎么样？

WCAG 1.4.11 非文本对比度（在 2.1 中添加）要求 UI 组件（按钮、表单边框、焦点指示器）和有意义的图形元素（传达状态的图标、区分数据系列的图表元素）3:1 对比度。3:1 阈值低于文本的 4.5:1，因为图形通常具有更大的可见区域。不传达含义的装饰图形免除。对每个传达状态的图标（可见的睁眼、删除的 X、选定的复选标记）和每个需要可区分的图表段应用 3:1。