颜色对比度检查器
检查前景色与背景色之间的 WCAG 对比度，并查看普通文字和大号文字是否通过 AA 与 AAA 级别。
正在加载工具…
颜色对比度检查器 — 以 HEX 输入前景（文字）色和背景色，本工具会计算精确的 WCAG 2.1 对比度，并实时显示普通文字与大号文字的 AA / AAA 通过或未通过标识，还附带示例文字预览。所有计算都在你的浏览器本地完成，任何颜色都不会上传到服务器。
颜色对比度检查器 是什么？
颜色对比度检查器是一款面向设计师、开发者和无障碍测试人员的免费在线 WCAG 对比度检查工具。它接收前景（文字）色和背景色，计算两者的相对亮度，并以 1:1 到 21:1 的数值给出对比度。随后它会判断该比值是否满足 WCAG 2.1 AA 级（普通文字 4.5:1、大号文字 3:1）和 AAA 级（普通文字 7:1、大号文字 4.5:1），并用两种颜色渲染示例文字预览，方便你一眼判断可读性。在交付设计前，用它来验证正文、按钮、链接和标签是否清晰可读。
如何使用 颜色对比度检查器
- 以 HEX 值输入或粘贴前景（文字）色，或点击其原生取色器直观地选取。
- 对文字所在的背景色执行相同操作。
- 查看对比度输出，显示为类似 4.5:1 的数值（1:1 表示两色相同，21:1 表示纯黑配纯白）。
- 查看普通文字和大号文字（18pt / 14pt 加粗及以上）的 AA 与 AAA 标识，了解通过了哪些级别。
- 查看用你的两种颜色渲染的示例文字预览，确认文字清晰易读。
- 调整任一颜色，直到达到设计所需的对比度级别。
示例
白底上的深灰文字
输入
前景 #595959，背景 #ffffff
输出
对比度 7.00:1 —— 普通和大号文字均通过 AA 与 AAA
一个未通过的低对比度组合
输入
前景 #999999，背景 #ffffff
输出
对比度 2.85:1 —— 普通文字未通过 AA 与 AAA，正文所需级别均未通过
仅大号文字通过
输入
前景 #767676，背景 #ffffff
输出
对比度 4.54:1 —— 通过 AA 普通与 AA 大号，但未通过 AAA 普通
常见问题
- WCAG 要求多大的对比度？
- WCAG 2.1 AA 级要求普通文字至少 4.5:1、大号文字至少 3:1。AAA 级更严格：普通文字 7:1、大号文字 4.5:1。本检查器会为这四个阈值各显示一个通过/未通过标识。
- 什么算大号文字？
- WCAG 将大号文字定义为 18pt（约 24px）及以上，或加粗时 14pt（约 18.66px）及以上。大号文字的对比度要求更低，因为更大的字形更易阅读，所以普通文字未通过时大号文字标识仍可能通过。
- 对比度是如何计算的？
- 它采用官方 WCAG 公式：先由线性化的 sRGB 通道计算每种颜色的相对亮度，再用 (较亮值 + 0.05) / (较暗值 + 0.05) 得到比值。结果范围为 1:1（两色相同）到 21:1（黑配白）。
- 它支持 alpha、RGB 或颜色名称吗？
- 输入仅支持 HEX（#rgb 简写或 #rrggbb），每个字段都配有原生取色器。它不考虑 alpha/透明度或半透明效果——请先把半透明图层合成为实色，再进行检查。
- 我的颜色会被发送到服务器吗？
- 不会。亮度和对比度计算完全通过 JavaScript 在你的浏览器中运行——不会上传任何颜色，也不会向服务器发送任何内容，因此既能保护隐私，页面加载后甚至还能离线使用。