WCAG 2.1 / 2.2 对比度标准解析
在网页无障碍设计中，色彩对比度是确保视力受损或在特定光照环境下阅读的用户能够顺畅获取信息的关键指标。本对比度检查器采用 WCAG 2.1 / 2.2 标准公式进行计算。该标准是目前全球网页内容无障碍指南（WCAG）所采用的合规依据。
对比度计算结果以“X:1”的形式呈现，其数值范围从 1:1（完全无对比，即文字与背景颜色相同）到 21:1（最高对比度，即纯黑与纯白）。通过精确测量文字色与背景色之间的相对亮度差，工具能够评估出该色彩组合在不同文本尺寸及界面元素下的可读性表现。
输入参数与支持的颜色格式
工具提供两个核心输入项，用户可以通过手动输入或使用取色器来指定颜色：
- 文字色：需要测试的文本颜色。
- 背景色：文本下方的背景颜色。
本工具支持以下三种主流的颜色格式：
- 十六进制值（Hex）：例如
#1a1a1a。 - RGB 值：例如
rgb(26, 26, 26)。 - HSL 值。
工具内置了便捷的交换按钮，点击即可对调文字色和背景色。工具的初始默认值为文字色 #4f46e5，背景色 #ffffff，计算得出的初始对比度为 6.29:1。
如果输入的颜色格式不符合规范，工具会实时显示错误提示：
- 若文字色无效，提示：“请输入有效的文字色，例如 #1a1a1a 或 rgb(26, 26, 26)。”
- 若背景色无效，提示：“请输入有效的背景色，例如 #ffffff 或 rgb(255, 255, 255)。”
对比度判定规则与达标阈值
针对不同的文本类型和界面元素，WCAG 制定了不同的通过门槛。本工具将检测结果细分为以下三个维度：
1. 正文 (Normal Text)
正文是指常规字号的文本。由于字形较小，其对比度要求最为严格：
- AA 级：对比度至少需要达到 4.5:1。
- AAA 级：对比度至少需要达到 7:1。
2. 大字号 (Large Text)
大字号在无障碍标准中的定义为：字号在 18pt（约 24px）及以上，或者在加粗状态下达到 14pt（约 18.5px）及以上。由于大字号更易辨识，其达标门槛有所放宽：
- AA 级：对比度至少需要达到 3:1。
- AAA 级：对比度至少需要达到 4.5:1。
3. 界面与图形
此项用于评估用户界面组件（如输入框边框、按钮轮廓）以及关键图形元素的可见性。该维度不区分 AA 和 AAA 等级，仅设有一个单一的通过阈值：
- 对比度至少需要达到 3:1 即可判定为“通过”。
综合判定结论
根据输入的颜色组合，工具会根据计算结果给出最终的综合判定结论：
| 计算结果与达标情况 | 综合判定结论 |
|---|---|
| 对比度满足正文 AAA 级要求（即 ≥ 7:1） | 正文通过 AA 和 AAA。 |
| 对比度满足正文 AA 级要求，但未达到 AAA 级（即 4.5:1 至 6.9:1 之间） | 正文通过 AA。 |
| 对比度仅满足大字号 AA 级要求，正文未达标（即 3:1 至 4.4:1 之间） | 仅大字号通过 AA。 |
| 对比度低于 3:1，无法满足任何 AA 级最低要求 | 未达 AA 最低要求——请提高对比度。 |
本地处理与隐私说明
本工具充分尊重用户的隐私需求。每次检查都在你的浏览器里完成，输入内容不会上传到 BroBroGo。所有的对比度计算与格式验证均在本地客户端实时运行。
常见问题解答
AA 和 AAA 的结果是什么意思?
AA 是大多数网站要达到的等级：正文对比度至少 4.5:1,大字号至少 3:1。AAA 更严格——正文要 7:1,大字号要 4.5:1。对比度范围从 1:1(毫无对比)到 21:1(白底黑字)。
多大算大字号?
18pt(约 24px)以上,或加粗的 14pt(约 18.5px)。大字号在较低对比度下仍然清晰,所以门槛放宽:AA 只需 3:1,AAA 只需 4.5:1,不用达到正文那么严的标准。
可以输入哪些颜色格式?
可以填十六进制值,如 #1a1a1a;rgb() 值,如 rgb(26, 26, 26);或 hsl() 值——也可以点色块直接取色。用交换按钮可以对调文字色和背景色。
用的是 WCAG 2 还是更新的 APCA 算法?
用的是 WCAG 2.1 / 2.2 公式,也就是当下无障碍规范和审核所依据的那套。APCA 是一种更贴近人眼感知的新算法,还在为 WCAG 3 草拟中——很有前景,但还不是合规标准,所以这里的达标结果没用它。