对比度检测

Contrast Checker

按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。

把一对文字色和背景色同时对照 WCAG 2.2 和 APCA 检查，模拟三种二色视觉，并能把整套配色作为矩阵打分。它显示两套标准，因为它们在真实的配对上会有分歧，而这种分歧正是有用的部分。

🔒 完全在你的浏览器里运行contrastaccessibilitywcaga11y

文字颜色

背景色

字号 16px字重

天地玄黄，宇宙洪荒。The quick brown fox jumps over the lazy dog.

WCAG 2.2

4.54:1

通过AA — 1.4.3 对比度（最小值），普通文本需要 4.5:1
不通过AAA — 1.4.6 对比度（增强），普通文本需要 7:1
通过1.4.11 非文本 — 图标、边框、聚焦框需要 3:1

按普通文本算。大号从 24px 起算，字重 700 时从 18.66px 起算。这是目前无障碍法规引用的标准——EN 301 549 和 Section 508 的要求都指向 WCAG，所以审计用的就是这个数。

APCA

Lc 71.6

浅色底上的深色字。正负号就是极性。跟 WCAG 不同，把两个颜色对调，答案会变。

达到： Lc 60 — 勉强读得下去. 字号大了能读，但不适合 16px 长时间阅读。

在这个 Lc 下，16px、字重 400 不够。

每个 APCA 级别的最小字号
级别	字重 400	字重 700
Lc 90	14px	12px
Lc 75	18px	14px
Lc 60	24px	18px
Lc 45	36px	24px
Lc 30	48px	36px

两个标准本来就会给出不同的答案

WCAG 2 的比值是 2008 年的一条公式：相对亮度之比再加一个固定的眩光项，对两个参数是对称的。APCA 建的是知觉响应的模型——它跟极性有关，因为在同样的亮度差下，浅底深字确实比反过来更好读；而且它把字号和字重当成题目的一部分，而不是事后另外贴上去的一条规则。

所以在真实的配色上两者会给出不同的答案，而这个分歧不是任何一方的 bug。WCAG 2 会放过一些白底中灰、其实很难读的组合，也会判掉一些深底深字、其实没问题的组合。目前无障碍法规引用的是 WCAG 2.2，所以审计跑的也是它。而更贴近读者真实感受的模型是 APCA。用 WCAG 判定过不过，用 APCA 在过了的那几个里挑一个。

这一对就是其中之一：WCAG AA 说通过，APCA 在 16px/400 下说不够。

色觉

用 Viénot–Brettel–Mollon 投影在线性光下模拟。常见的偷懒做法是直接对伽马编码的字节做投影，那样会把两个颜色显得比实际更容易分辨，而这正是无障碍检查最不该错的方向。

示例文字

红色盲（无 L 视锥，男性约 1%） · 4.54:1

示例文字

绿色盲（无 M 视锥，男性约 1%） · 4.54:1

示例文字

蓝色盲（无 S 视锥，约 0.01%） · 4.54:1

示例文字

全色盲（完全无色觉，约 0.003%） · 4.54:1

怎么用

输入两个颜色
文字色和背景色，任何记法。结论上方的示例段落按你设定的字号和字重用它们画出来。
设定真实的字号和字重
WCAG 在 24px 处改变阈值，字重 700 时是 18.66px。APCA 把字号和字重当作问题的一部分，而不是一条单独的规则。字号不对，两个答案都没什么意义。
读两个结论
WCAG 用来通过审核，APCA 用来在通过的选项之间做决定。它们有分歧时页面会明确说出来。
一次检查整套配色
粘贴你的颜色，一行一个，得到一个 N×N 矩阵。是 N×N 而不是三角形，因为 APCA 不对称——同样两个颜色，哪个做文字，分数就不同。