WCAG对比度检测

使用方法

WCAG对比度检测三步：

1. 「文字色」填前景色，演示 #333333。
2. 「背景色」填背景色，演示 #FFFFFF（白底）。
3. 点「检测对比度」，结果区给出比值与 AA / AAA 是否达标。

下方色块用你选的配色显示「示例文字 Aa」，可直观感受清晰度。

WCAG对比度检测能解决什么

它适合关心可读性与无障碍的人：

• 无障碍合规：做政府、金融类页面时常被要求达到 WCAG AA。
• 配色决策：灰色文字放在浅灰底上常常不达标，一测便知。
• 暗色模式：切换深色底时重新检查文字是否还够清晰。

本页不做的事：不检查色盲友好、不检测图片上的文字——只算两种颜色之间的对比度比值。

原理和变量

① 用了哪个具体函数：先按 WCAG 公式把每个通道做 sRGB 线性化（小于等于 0.03928 用 c/12.92，否则用 ((c+0.055)/1.055)^2.4），再加权求和得相对亮度 L=0.2126R+0.7152G+0.0722B，最后算比值 (亮+0.05)/(暗+0.05)。

② 关键参数为什么这样取：系数 0.2126/0.7152/0.0722 来自人眼对绿光最敏感、蓝光最不敏感的特性；加 0.05 是为了避免纯黑时除零。

③ 遵循哪个标准：完全遵循 WCAG 2.1 的对比度定义，阈值 4.5（AA 普通）、3（AA 大号）、7（AAA 普通）、4.5（AAA 大号）。

④ 输入怎么变成输出：#333333 与 #FFFFFF：白 L=1，深灰 L≈0.0331，比值 =(1+0.05)/(0.0331+0.05)≈12.63，达到 AAA。

⑤ 边界与阈值：仅接受 3 位或 6 位十六进制；非法色值会提示，不会静默按黑或白处理。

⑥ 常见误用的正确解释：比值 1 表示完全相同（不可读）；比值越高越清晰，但并非越高越好——纯黑对纯白 21 反而刺眼，正文常用 #333 一类深灰。大号文本指约 18pt 以上或 14pt 粗体。

完整示例

演示输入：文字 #333333、背景 #FFFFFF。推导：

• 背景白色相对亮度 L=1.000。
• 文字 #333333 三通道均为 51/255≈0.2，线性化后 L≈0.0331。
• 对比度 = (1.000 + 0.05) ÷ (0.0331 + 0.05) ≈ 12.63。
• 结论：≥7，达到 AAA（普通文本），同时满足 AA。

再试 #777777 对白底约 4.48，略低于 4.5，不达 AA，说明浅灰文字要谨慎。演示仅作说明。

输入范围与对照表

12 组常见文字/背景配色的对比度对照（仅作演示）：

结果边界和舍入

对比度保留两位小数，理论范围 1.00～21.00。判级以两位小数后的真实值为准：例如 4.48 记为不达 AA，4.54 记为达到。大号文本（约 ≥18pt 或 ≥14pt 粗体）阈值减半为 3.0 / 4.5。

注意：本页只比较颜色本身，不考虑字号、字重与背景花纹；半透明色或叠加效果请先合成实际颜色再测。

常见问题

相关工具

• HSL转RGB转换器
• 互补色颜色查询
• 深色颜色生成器
• 三角色颜色方案生成器
• HSL转十六进制转换器
• 颜色选择器
• 邻近色颜色方案生成器