颜色对比度检查
检查前景与背景色对比度是否符合 WCAG AA/AAA 标准。
使用说明
- 用取色控件选择前景色（文字颜色）与背景色，或直接在输入框里填写 HEX 值。
- 页面会按 WCAG 公式实时计算对比度比值（范围 1–21）。
- 查看下方判定表：正常文本 AA/AAA 与大号文本 AA/AAA 四项分别以绿色「通过」、红色「未通过」标示。
- 示例预览区用当前配色渲染正常与大号两档文字，直观感受可读性。
- 想比较反色搭配时，点「交换前景 / 背景」一键互换两色。
常见问题
对比度比值是怎么算出来的？
AA 和 AAA 有什么区别？
什么算「大号文本」？
对比度达标但看起来还是累怎么办？
使用步骤
- 输入前景与背景颜色
分别用取色器或直接输入 HEX 设置前景色（文字）与背景色，两处都支持 3 位或 6 位写法，修改即时生效。
- 读取实时对比度比值
结果区实时显示对比度比值，取值介于 1 与 21 之间，数值越大文字越清晰，由 WCAG 相对亮度公式计算得出。
- 对照四项达标判定
对照四行判定结果：正常文本 AA 要求 4.5 以上，AAA 要求 7 以上。大号文本 AA 要求 3 以上，AAA 要求 4.5 以上。绿色 Pass 表示达标，红色 Fail 表示不达标。
- 用示例预览检查观感
示例预览按当前颜色渲染正常与大号文本，肉眼确认可读性；点击「交换前景 / 背景」可快速测试反色搭配。
工具详细介绍
颜色对比度检查器按 WCAG 2.x 标准计算文字与背景的对比度比值。原理是把两个 HEX 颜色线性化后，按红 0.2126、绿 0.7152、蓝 0.0722 加权求出相对亮度。再用较亮者加 0.05 除以较暗者加 0.05，得到 1 到 21 之间的比值。结果与 AA、AAA 两级阈值比对后给出判定。
适合前端与设计师在定稿前验证按钮文字、占位符与灰字是否达标。网站无障碍自查也可以从这里入手，各国无障碍法规普遍以 AA 级为底线。对比度只衡量亮度差，不涉及字距、行高与字体本身。正文想更舒适可以瞄准 7:1 以上，并避免纯黑配纯白的生硬组合。
原理与背景
公式里的 0.05 偏移项是刻意设计。写成 (L1+0.05)/(L2+0.05) 而不是直接相除，为的是让纯黑对纯白恰好等于 21，并避免黑色作背景时分母归零。计算相对亮度前，会先把 sRGB 通道做伽马展开，再按红 0.2126、绿 0.7152、蓝 0.0722 加权。这模拟了人眼对绿色的敏感，也是数值与肉眼感受大体一致的原因。对比度只衡量亮度差，不涉及字距、行高与字体本身。
4.5 与 3 这两个阈值来自对低视力人群的阅读研究。其中 3:1 还被 WCAG 单独用作图形组件与控件边框的要求，对应 1.4.11 非文本对比度。大号文本指 24px 及以上常规字重，或 18.66px 以上的粗体，阈值放宽到 3 与 4.5。后续提出的 APCA 算法会按文字粗细与颜色给出更细的分档，但各国无障碍法规目前普遍仍以对比度比值为执行口径。按钮的悬停态、禁用态也要各测一次。AA 级的 4.5 与 AAA 级的 7 在可预见的将来仍是主流的验收基准。
典型使用场景
- 灰色占位符自查
输入框提示文字常用 #999 级别的灰，白底上比值只有 2.8 左右。测出不合格后，加深一档到 #767676 才过 4.5，这一步多数网站都漏掉，建议养成自查习惯。
- 图表系列色验收
给折线与柱形选色时，把每个系列色和图表底色成对测一遍。比值低于 3 的组合在图上区分不开，换色相或拉开深浅差距后再测一轮。
- 邮件模板的灰字定级
邮件客户端渲染不可控、样式兜底少。定稿前把正文、次要说明与版权行几级灰字各测一遍，确保最浅的一档也过 AA。
使用技巧
- 大号文本指 24px 及以上常规字重，或 18.66px 以上的粗体，阈值放宽到 3 与 4.5。
- 对比度达标但看着吃力时，试着加大字号、放宽行高，或把纯白背景调成浅灰降低刺眼感。
- 按钮的悬停态、禁用态也要各测一次，这些状态最容易被忽略，对比度常常掉到 3 以下。
注意事项
- 半透明色要先合成再测
60% 透明度的文字，实际显示的是与背景混合后的颜色，而不是设定色。先把透明色换算成叠加后的实色 HEX 再测，否则结果会明显失真。
- 渐变背景要两端各测
渐变上放文字时，对比度会沿渐变不断变化，测一处不能代表全部。取最深与最浅两端各测一次，两端都达标，横幅上每个位置才可读。
- 品牌色卡线时分层使用
品牌亮色在深底上常卡在 3 与 4.5 之间，全站改色成本又高。可让品牌色只服务大标题，走大文本 3:1 阈值，正文改用中性色兜底。