颜色对比度检查器，免费
测试 WCAG 2.1 对比度比率以保证可读性与无障碍。
使用方法
- 选择一种前景（文字）颜色和一种背景颜色。
- 对比度比率会即时更新。
- 查看常规和大号文字的 WCAG 评级（AA/AAA）。
- 点击「互换」交换两种颜色。
常见问题
WCAG 是什么？
WCAG（Web Content Accessibility Guidelines，网页内容无障碍指南）是让网页内容对所有人可访问的国际标准。AA 级是最普遍要求的级别。AAA 级是最高级别。
什么算「大号文字」？
大号文字定义为至少 18 pt（24 px），或至少 14 pt（18.66 px）的粗体。因为更易阅读，所以对比度要求较低。
应该追求什么样的对比度比率？
正文文字至少达到 4.5:1（AA）。若追求最佳无障碍，应达到 7:1（AAA）。标题和大号文字至少需要 3:1。
WCAG实际测量的内容
Web无障碍中的「对比度」并非「颜色看起来有多不同」，而是两种颜色之间相对亮度的精确比率。亮度是对典型视力正常的观察者来说颜色亮度的感知近似值。该比率从1:1（两种颜色具有相同亮度，互相不可见）到21:1（纯黑色 #000000 对纯白色 #ffffff）。三条WCAG规范性成功标准使用此比率：
- 1.4.3 对比度（最低标准），AA级：普通文本至少4.5:1，大文本至少3:1。
- 1.4.6 对比度（增强标准），AAA级：普通文本至少7:1，大文本至少4.5:1。
- 1.4.11 非文本对比度，AA级（WCAG 2.1新增），UI组件和有意义的图形元素对相邻颜色的对比度至少达到3:1。
4.5:1的底线并非随意设定。WCAG自身的推导使用3:1的ANSI正常视力基准，乘以1.5以适应20/40视力的用户（通常用于定义法律意义上的「低视力」的阈值）。4.5 = 3 × 1.5。AAA级7:1阈值将相同逻辑延伸至大约20/80的视力。标志、品牌名称以及附带或装饰性文字不受限制，但其他所有内容均适用此规则。
公式
WCAG技术G18中的对比度公式分三步。输入为8位sRGB通道值（0-255），每个首先转换为0-1范围：
- sRGB线性化（消除gamma曲线）。对每个通道V：若 V ≤ 0.04045，则 V_linear = V ÷ 12.92；否则 V_linear = ((V + 0.055) ÷ 1.055)^2.4。（旧版WCAG文档使用0.03928；W3C勘误后更新为0.04045以匹配正式sRGB规范，数值差异可忽略不计。）
- 计算相对亮度：L = 0.2126·R + 0.7152·G + 0.0722·B（线性化后）。权重来源于CIE 1931标准观察者的明视觉光视效率函数，人眼对绿色最敏感（约71%），其次是红色（约21%），然后是蓝色（约7%）。这就是为什么白底上的纯蓝文字即使颜色看起来非常不同，也可能无法通过对比度检查。
- 计算比率：(L1 + 0.05) ÷ (L2 + 0.05)，其中L1为较亮的颜色，L2为较暗的颜色。0.05偏移量模拟了典型显示器上的环境眩光，并防止当一种颜色接近纯黑时比率趋于无穷大。
黑白对比的示例：白色L = 1.0，黑色L = 0，因此比率为(1 + 0.05) ÷ (0 + 0.05) = 21。这是sRGB中可能的最大对比度。
什么算作「大文本」？
WCAG将大型文本定义为至少18磅（普通字重）或14磅粗体。按W3C规定的1pt = 1.333px换算为CSS像素：
- 18pt = 24px，普通字重
- 14pt bold = 18.66px，粗体
大多数浏览器默认正文文本为16px / 12pt，并非大文本。一个常见错误是将任何标题都视为大文本；以18px普通字重设置的 <h3> 仍适用4.5:1的普通文本规则。
经典边缘案例：白底 #767676
追求极简主义的设计师通常为正文文本选择中性灰。外观上对眼睛完全相同的两个值，却处于WCAG线的两侧：
| 前景 | 背景 | 比率 | AA普通文本 |
|---|---|---|---|
| #000000 | #ffffff | 21.00 | 通过（最大值） |
| #595959 | #ffffff | ~7.0 | 通过 + AAA |
| #767676 | #ffffff | 4.54 | 通过（刚好） |
| #777777 | #ffffff | 4.48 | 不通过 |
| #959595 | #ffffff | 3.00 | 不通过（仅大文本通过） |
| #ffff00 | #ffffff | 1.07 | 不通过 |
一个字符的十六进制偏移，#767676 和 #777777 之间的差异，会将外观相同的灰色从通过翻转为不通过，因为WCAG明确禁止向上舍入比率。WebAIM特别指出 #777777 是「常用灰色」但不满足AA标准。这个单一陷阱在实际网站扫描的自动化审计失败中占有可衡量的份额。
公式的局限性
相对亮度公式快速且确定，但存在有据可查的感知缺陷：
- 对称性。WCAG 2返回的比率相同，无论是浅色文字在深色背景上，还是深色文字在浅色背景上。实证阅读研究表明，暗底浅文要达到同等可读性比浅底暗文需要更多的对比度，部分原因在于瞳孔扩张和深色背景上亮色字形的「光晕」效应。通过了WCAG 2 AA的暗色模式UI仍可能显得模糊不清。
- 空间盲点。该公式忽略了字重、笔画粗细以及大文本阈值以外的字体大小。18px的细体字和18px的900字重字体被同等对待。
- 暗色模式虚假通过。根据APCA文档，该公式系统性地高估了深色颜色的对比度。两种数学上通过了WCAG 2的深灰色，在实际显示器上可能视觉上无法区分。
APCA（无障碍感知对比度算法）是为WCAG 3原型开发的候选替代方案。它返回一个有符号的Lc值，大致范围为−108到+106，具有极性感知能力，并包含字重/字号查找表。APCA目前是测试版非商业参考标准，而非法律合规目标（生产站点仍应以WCAG 2.1 / 2.2 AA为目标），但它是更准确的可读性检查方案，尤其对暗色模式。Chrome DevTools的颜色选择器内置了APCA预览功能。
法律层面的重要性
WCAG 2.2于2023年10月5日成为W3C推荐标准，但对比度标准从2.1版本起保持不变。颜色对比度是数字无障碍诉讼中被引用最多的问题之一，多个司法管辖区实际上已将其列为强制性要求：
- 美国，第508条款（2017年更新）与WCAG 2.0 AA保持一致，因此4.5:1对联邦采购具有约束力。ADA第III条法院裁决反复将WCAG AA列为面向公众的商业网站的事实标准。美国司法部于2024年4月采纳了一项第II条规则，要求州和地方政府网络内容符合WCAG 2.1 AA，并设有本十年内分阶段的截止日期。
- 欧盟，EN 301 549纳入WCAG 2.1 AA。欧洲无障碍法案（2019/882号指令）的合规截止日期为2025年6月28日，涵盖网站、移动应用、电子商务、银行、电子书等。微型企业服务豁免。各成员国处罚规定不同。
- 英国，2010年平等法的「合理调整」义务适用于私营和公共部门。公共部门机构受2018年无障碍法规约束，该法规纳入了EN 301 549 / WCAG 2.1 AA。
- 加拿大，AODA（安大略省）及联邦《无障碍加拿大法》要求WCAG 2.0 AA，AODA的分阶段截止日期早已过期。
颜色对比度与色盲
常见的混淆点：WCAG比率基于亮度，对大多数色盲用户仍然有用，来自亮度的4.5:1比率对应强烈的感知信号，即使色调线索丢失。这就是为什么对比度标准与另一条独立标准共存，即1.4.1 颜色的使用，该标准禁止仅依赖颜色来传达信息。对比度不能告诉您红绿图表对红绿色盲者是否可读，只能告诉您每种颜色是否与图表背景形成对比。图表和状态性UI需要在颜色之上叠加图案、标签或形状。
实用检查清单
- 白色背景上的正文：AAA级请使用
#595959或更深的颜色；#767676是仍能通过AA普通文本标准的最浅灰色。 - 品牌蓝：许多品牌蓝落在3-4.5范围内。
#1976d2是典型的Material蓝，对比度约为4.59:1，勉强通过AA普通文本标准。#42a5f5对比度约为2.6:1，不通过。 - 表单边框：白底上的
1px solid #ccc边框约为2.13:1，不满足1.4.11。请使用#767676或更深的颜色。 - 焦点指示器对背景的对比度必须达到3:1。浏览器默认轮廓线经常被CSS重置覆盖，却没有替换达到阈值的方案。
- 占位符文本在技术上属于附带内容，但用户确实会阅读它，请将其视为适用4.5:1。
- 不要在暗色模式下相信视觉判断。WCAG 2的比率会系统性地高估深色背景的对比度。请在Chrome DevTools中使用APCA进行交叉验证。
更多问题
纯黄色在白底上为何看起来明亮却不通过对比度检查？
白底上的黄色（#ffff00）对比度为1.07:1，几乎没有对比度。亮度公式将绿色权重设为71%，红色为21%，因此黄色（R+G）的亮度非常接近白色。相比之下，黑底上的黄色对比度为19.56:1，是已知最易读的组合之一，这就是为什么它用于道路标志和安全帽警告。
我是否应该始终以AAA为目标？
不应。WCAG自身表示：「不建议将AAA级合规性作为整个网站的通用政策要求，因为某些内容无法满足所有AAA级成功标准。」AA是几乎所有地方的法律目标；AAA适用于高风险信息阅读（长篇内容、面向公众的政府文件、无障碍优先出版物）。
自动化工具能捕获所有对比度失败吗？
不能。axe-core、Lighthouse等审计工具能可靠地标记文本在纯色背景上的失败，但无法测试叠加在背景图像、CSS渐变、伪元素背景或CSS边框颜色上的文本，这些情况被标记为「不完整」，需要人工审查。像本工具这样的实时取色器，在上线前从图像中提取主要背景颜色并仅检查文本/背景对时，有其独立的实用价值。
本工具支持透明度/alpha通道吗？
本页面检查不透明的十六进制颜色对。如果您的文本或背景使用alpha通道，实际对比度取决于其背后的颜色，您需要先计算合成后的前景色，再检查得到的不透明颜色。
有任何内容会发送至服务器吗？
不会。亮度公式和比率在您的浏览器中计算；颜色从不离开您的设备。页面加载后即可离线使用。