颜色对比度怎么检查：WCAG 对比度标准与 AA/AAA 达标判断

"这个灰字是不是太浅了？"——设计评审里这类争论往往靠感觉。实际上它有一个客观标准：WCAG（Web 内容无障碍指南）用对比度比值给出了明确阈值，达标与否可以精确计算。

这篇用 NBTools 的WCAG 颜色对比度工具讲清楚：三档阈值是多少、比值怎么算出来的，以及最常见的几类不合格配色。工具在浏览器本地实时计算，不上传任何数据。

选两个颜色，实时看三项达标情况

页面上有前景色和背景色两组输入，每组都有取色器和十六进制输入框（默认前景 #1f2937、背景 #ffffff）。改任意一边，预览区与结果立即刷新，无需点按钮：

• 对比度比值：如 12.6:1，越高越清晰。
• 普通文本 AA：要求 ≥ 4.5:1
• 普通文本 AAA：要求 ≥ 7:1
• 大号文本 AA：要求 ≥ 3:1

每项直接显示"通过 / 未通过"，不用自己去记阈值。

三档阈值分别是什么

其中"大号文本"在 WCAG 中通常指约 18pt（24px）以上，或 14pt（约 18.66px）以上的加粗文本。标题字大，即使对比度略低也仍能辨认，所以要求放宽到 3:1。

AA 与 AAA 是 WCAG 的两个合规等级：AA 是业界普遍采纳的基线，AAA 是更严格的增强级。一般产品做到 AA 即算合格。

比值是怎么算出来的

工具依据 WCAG 2.1 的相对亮度公式计算，大致分三步：

1. 把前景色和背景色的 R/G/B 各通道归一化到 0–1。
2. 按人眼对不同亮度的感知做伽马校正（暗部不是线性的），再加权求出各自的相对亮度。
3. 对比度 = (较亮色亮度 + 0.05) / (较暗色亮度 + 0.05)，结果范围 1:1 到 21:1。

所以纯黑配纯白是最高值 21:1，相同颜色则是 1:1。这也解释了一个反直觉现象：浅色背景上的浅灰字，肉眼觉得"还行"，实际比值常常只有 2:1 左右——远低于 4.5 的门槛。

最常见的不合格场景

• 浅灰小字：如 #999 灰字配白底，对比度约 2.8:1，未达 AA。用于次要说明尚可争议，用在正文一定不合格。改成 #767676 以上才能刚过 4.5:1。
• 浅色按钮上的白字：品牌色偏亮（如浅黄、浅绿）时配白字，常常只有 1.5–2:1。解决方法是把按钮底色加深，或改用深色文字。
• 占位符文字（placeholder）：默认样式往往过浅，虽然 WCAG 对占位符要求有争议，但过浅会明显影响填写体验。
• 图表与数据标签：多系列配色中相邻色块对比不足，在投影或色弱条件下更难分辨。

整改思路

• 先改深色，别先改品牌色：多数情况下把文字调深（或调浅）就能达标，不必动品牌主色。
• 大字号可以放宽：标题类文本按 3:1 判断即可，不必强求 4.5。
• 用预览区实际看：改完在预览区输入真实文案确认观感，数字达标也别忽视极端场景。

需要挑选或微调颜色值时，可配合颜色转换工具（HEX/RGB/HSL 互转，改亮度最方便）与调色板生成工具使用。

常见问题

达标应该看 AA 还是 AAA

一般产品以 AA 为合规基线（普通文本 ≥4.5:1）。AAA（≥7:1）是更严格的增强级，适合长文阅读、政务医疗等对可读性要求高的场景。

多大字算"大号文本"

WCAG 中通常指约 18pt（24px）以上，或 14pt（约 18.66px）以上的加粗文本，这类可按 ≥3:1 判断。

为什么感觉能看清但显示未通过

对比度是按相对亮度公式计算的客观值，人眼在明亮屏幕、安静环境下容易高估自己的辨识能力。换到手机户外、投影或色弱/老年用户场景，低对比度文字的可读性会明显下降。

按钮和图标也适用这个标准吗

文字内容适用上述文本阈值。图标、边框、图表色块等"非文本元素"在 WCAG 中有单独的对比要求，本工具给出的是文本口径的比值，可作为参考。

颜色数据会上传吗

不会。计算完全在本地浏览器完成，不上传任何数据。