对比度检查到底在量什么
相对亮度，不是颜色在你眼里显出来的明亮程度。
WCAG 用一个加权公式把每个颜色折算成一个亮度值，其中绿色的权重远高于蓝色，因为人眼对绿色敏感得 多。对比度则是"较亮的亮度加 0.05"除以"较暗的亮度加 0.05"，取值落在完全相同的 1:1 和黑底白字的 21:1 之间。
这就是为什么靠眼睛估不靠谱。HSL 明度相同的两个颜色，相对亮度可能差三倍；而高饱和的蓝色看起来 比它实测的要亮得多。纯蓝配白底是 8.6:1，纯黄配白底是 1.07:1、基本等于看不见——两者都是满饱和的 原色。
wcag 对比度的几个档位，以及该在意哪一个
4.5:1，正文 AA。 真正要紧的那个。大多数无障碍法规引用的是 WCAG AA，而任何页面上大部分文字都 是正文，所以把它当地板而不是目标。
3:1，大字 AA。 适用于 18pt（约 24px）以上，或 14pt 加粗（约 18.66px）以上。字形越大笔画越粗， 所以门槛更低。
7:1 和 4.5:1，AAA。 需要长时间阅读的内容值得往这儿做，通常不是法律要求。
3:1，非文字。 出自 WCAG 1.4.11，覆盖任何控件的可视边界：输入框描边、聚焦环、开关状态、承载 含义的图标。这一档被漏掉的频率极高，因为设计师查了文字，却忘了 1.5:1 的输入框边框对很多人来说 根本不存在。
值得点名的那个陷阱
大字过了，正文没过。这事之所以常发生，是因为设计师查了标题，看到通过，就过去了。标题从来不是问题： 它又大又粗，很容易过。真正需要有人盯着看两分钟的，是那段灰了一点点的 15px 段落，而它才是没过的 那个。
先查正文颜色。正文过了，标题几乎必然也过。
预览区为什么存在
数字是答案，但一个比值并不能告诉你结果看起来对不对。上面的预览用你那两个颜色渲染两个字号的真实 文字，让你亲眼看到这个比值在描述的东西。
一切都在这个标签页里、从你输入的两个值算出来。没有文件、没有上传、没有请求。