在线颜色对比度检查器 - WCAG AA/AAA 达标检测

颜色对比度检查器 · WCAG 无障碍达标

颜色对比度检查器会计算文字颜色与背景之间的对比度，并即时告诉你这组配色是否符合 WCAG AA 与 AAA。它专为想要打造易读、无障碍界面，又不想凭感觉猜测的设计师和开发者而生。

用取色器或 HEX 色值输入前景（文字）颜色和背景颜色，对比度会实时更新，同时显示正常文字、大号文字和界面元素的达标/不达标标识。当一组配色不达标时，检查器会给出无障碍替代方案，并模拟色觉障碍用户眼中的配色效果。

隐私无忧：所有计算都在你的浏览器中完成。你的颜色绝不会被上传、追踪或存储在服务器上。

设置前景（文字）和背景颜色。点击色块打开系统取色器，或直接输入 HEX 色值，例如 #1F2937 或 1F2937。

对比度（从 1:1 到 21:1）会即时更新，并显示正常文字、大号文字和界面元素在 AA 与 AAA 下的达标/不达标标识，还有真实文字在你背景上的实时预览。

如果一组配色没通过正常文字的 AA，打开推荐替代配色，点击任意色块即可应用无障碍颜色。用交换颜色对调前景与背景，测试反向配色效果。

打开更多工具模拟红色盲（Protanopia）、绿色盲（Deuteranopia）和蓝色盲（Tritanopia），或套用快速预设，一键对比常见配色。

每次更改颜色，对比度都会立即重新计算，让你在设计过程中即时获得达标或不达标的反馈。

一次性检测正常文字（AA 4.5:1、AAA 7:1）、大号文字（AA 3:1、AAA 4.5:1）和界面元素（AA 3:1）。

配色未通过 AA 时，最多给出四组无障碍替代方案，显示调整后的颜色、对比度，以及改的是文字还是背景。点击一组即可应用。

在真实的示例标题、正文、小号说明文字和带边框的按钮上查看配色效果，确认无误再使用。

预览你的配色在红色盲（Protanopia）、绿色盲（Deuteranopia）或蓝色盲（Tritanopia）下的呈现效果，确保对所有人都适用。

一键载入白底黑字、黑底白字等常见配色，从已知的基准开始调整。

立即对调前景与背景，测试反向配色的对比效果。

一键复制任意色值，直接粘贴到你的设计工具或代码中。

正常文字至少要达到 4.5:1（WCAG AA），若想更好的无障碍效果可达到 7:1（AAA）。大号文字——18px 及以上，或 14px 加粗——只需 3:1 即可通过 AA。

WCAG AA 要求正常文字达到 4.5:1，大号文字达到 3:1。图标、边框和交互元素等界面元素同样适用 3:1 的最低标准。

检查器采用 WCAG 官方公式。它先算出每种颜色的相对亮度，再用较亮值加 0.05 除以较暗值加 0.05，得出 1:1 到 21:1 之间的对比度。结果与其他无障碍工具和浏览器开发者工具一致。

AA 是大多数网站的目标，也是 ADA 类合规性广泛引用的最低标准。AAA 是更严格的级别，能进一步提升可读性，但部分配色较难达到。多数团队以 AA 为目标，并在条件允许时让正文文字达到 AAA。

白底上的浅灰色文字（约 #999999 或更浅）往往低于 4.5:1。一种颜色在你看来可能"够深"，却仍达不到对比度——这正是数值检查的意义所在。

把文字调暗或把背景调亮，直到对比度越过阈值。推荐替代配色面板会为你完成这一步，算出达到 AA 的无障碍颜色，让你一键应用。

以 HEX 色值输入颜色（带不带前导 # 都可以），或使用系统取色器。若要测试 RGB 或 HSL 值，请先用任意颜色转换工具转成 HEX。

大约 8% 的男性和 0.5% 的女性存在某种色觉障碍。模拟功能会展示你的配色在红色盲（Protanopia）、绿色盲（Deuteranopia）或蓝色盲（Tritanopia）下的呈现效果，帮你确认设计对这些用户依然清晰易读。