对比度预览示例文本
The quick brown fox jumps over the lazy dog.
对比度比率
5.17 : 1
AA（正常文本）
工具介绍
输入前景色和背景色的 HEX，页面计算对比度，并标成 AAA（正常文本）、AA（正常文本）、AA（大文本）或不达标。预览区用这两种颜色画一行中文和一行英文。
先把 HEX 变成 0–255 的 RGB，3 位缩写会展开成 6 位。每个通道先除以 255，不大于 0.03928 的除以 12.92，其余按 ((v+0.055)÷1.055)^2.4。相对亮度 = 0.2126R + 0.7152G + 0.0722B。对比度 = (较亮 + 0.05) ÷ (较暗 + 0.05)。分级用未四舍五入的比值：≥7 为 AAA（正常文本），≥4.5 为 AA（正常文本），≥3 为 AA（大文本），否则不达标。显示保留两位小数。
计算示例
输入：前景 #2563EB，背景 #FFFFFF
输出：5.17 : 1，AA（正常文本）
输入：前景 #000000，背景 #FFFFFF
输出：21.00 : 1，AAA（正常文本）
输入：前景 #FFFFFF，背景 #FFFFFF
输出：1.00 : 1，不达标
使用限制
- 只给一个标签。5.17 既满足正常文本 AA，也满足大文本 AAA，页面只显示「AA（正常文本）」。
- 不算透明度。半透明字叠在图片上的实际对比度会更低。
- 不检查非文本图形、焦点边框或 3:1 的 UI 组件规则，只按上面的文字档位比较。
常见错误
- 只看两位小数。分级发生在四舍五入之前，贴着 4.50 或 3.00 的颜色要以原始比值为准。
- 把大号标题的要求套到 14px 正文上。正常文本的 AA 是 4.5，不是 3。
- 前景和背景填反没关系，公式取较亮和较暗，顺序不影响比值。
常见问题
#767676 配白底是多少？▾
4.54 : 1，刚刚超过 4.5，标签是 AA（正常文本）。
21:1 是上限吗？▾
黑和白就是这个公式的两端，结果为 21。其他颜色都会更低。
和设计软件里的对比度差 0.01 正常吗？▾
正常。不同工具的舍入时机不完全一样，过线附近要看未舍入的值。