对比度检查器 · WCAG 2.2 + APCA(WCAG 3 草案)并排 — Vectobox
浏览器端运行的无障碍对比度检查器,一页同时给出 WCAG 2.2 比值与 APCA Lc(WCAG 3 草案)两套答案,标记 WCAG 2 误判的约 20% 颜色对;内置 APCA 字号-字重查找表、6 组对照样例和沿亮度轴反向调整。颜色对不上传,零追踪。
完全在浏览器运行,零上传。你的颜色不会离开当前标签页。
The quick brown fox14 px / 400
The quick brown fox18 px / 400
The quick brown fox24 px / 700
The quick brown fox32 px / 700
| px | 400 | 700 |
|---|---|---|
| 10 | — | — |
| 11 | — | — |
| 12 | 100 | 90 |
| 13 | 95 | 85 |
| 14 | 90 | 75 |
| 15 | 85 | 75 |
| 16 | 75 | 65 |
| 18 | 75 | 60 |
| 21 | 70 | 55 |
| 24 | 60 | 45 |
| 28 | 55 | 40 |
| 32 | 50 | 35 |
| 36 | 45 | 30 |
| 42 | 40 | 30 |
| 48 | 35 | 30 |
| 60 | 30 | 30 |
| 72 | 30 | 30 |
| 96 | 30 | 30 |
APCA 是什么?
APCA(Accessible Perceptual Contrast Algorithm,G-4g 版本)是 Andrew Somers 提出、并被 WCAG 3 草案列为候选的对比度模型。与 WCAG 2 的对称比值不同,APCA 给出带正负号的 Lc 值(-108 到 +106):正号代表深字浅底,负号代表浅字深底,正文文本的可读阈值是 |Lc| ≥ 75。
为什么 WCAG 2 会与 APCA 判定不一致?
WCAG 2 的公式 (L1+0.05)/(L2+0.05) 针对纯黑底白字这种极端高对比场景调校。它会系统性放过浅字-中灰底场景(例如白字在 #777 上得到 4.48:1,差 0.02 才达 AA,而 APCA 给出 Lc -68,落在可读范围内),又会过严判断暖色调中间值(如白底橙字)。APCA 的感知加权指数同时修正了这两种偏差。
APCA 用查找表,而不是单一阈值
APCA 不依赖一个魔数:一组颜色能否通过取决于字号与字重。14 px / 400 正文需要 |Lc| ≥ 90,而 24 px / 700 标题只需 |Lc| ≥ 45。本页表格同时显示当前 Lc 下 400 与 700 字重所需的最小字号,帮助你判断这组颜色适合用在哪种文本角色上。
沿亮度轴反向调整
Adjust 按钮会在 HSL.L 上跑 25 步二分搜索(保持色相与饱和度不变),直到 |Lc| ≈ 75(或 WCAG 比值 ≈ 4.5)。当目标不可达(例如前景背景都接近白)时,工具返回最接近的近似值并显式标记。
常见问题
- APCA 是什么?与 WCAG 2 有何不同?
- APCA G-4g 是一种感知加权的对比度算法,被 WCAG 3 草案列为候选。它返回带正负号的 Lc(约 -108 到 +106),正负号携带极性;而 WCAG 2 返回对称比值(≥ 1),不区分前景与背景。两者在极端高对比上意见一致,但在约五分之一的真实颜色对上判定不同。
- 今天我应该用哪一套标准?
- WCAG 2.x 目前仍是 Section 508(美国)与欧洲无障碍法案的法定基线,AA 是硬性要求。APCA 在 WCAG 3 工作草案中是候选算法,适合作为 WCAG 2 之上的设计 QA 工具,而不是替代品。
- 为什么我的颜色 WCAG 通过但 APCA 不通过?
- WCAG 2 的比值围绕纯黑底白字调校,公式中的 +0.05 底数会把中间灰拉大。中灰底浅字(白字在 #777、白底灰字)经常仅仅因为这个底数才能通过 4.5:1,而 APCA 的中间调指数对这类组合更保守。
- 我的数据会被上传吗?
- 不会。所有 WCAG 比值、APCA Lc、字号查找和二分搜索都在浏览器本地完成。计算过程没有网络请求,没有埋点,也不会追踪你输入的颜色。