这个工具计算什么
屏幕上的文字与背景能分得多清楚,可以用一个数字来衡量。本页完全按照 WCAG(Web Content Accessibility Guidelines,网页内容无障碍指南)2.x 中 成功标准 1.4.3(最低对比度,AA 级)和 1.4.6(增强对比度,AAA 级)规定的方法计算。输入的两种颜色按 sRGB 解读,支持 3 位(#abc)和 6 位(#aabbcc)十六进制写法。 结果区除了对比度,还会显示两种颜色的相对亮度和一行计算过程;如果没有达到目标,工具会只调整文字颜色、变深或变浅到刚好达标,并给出建议色。 从零开始搭配颜色是配色方案生成器的工作,本页用来检验已经选好的组合。
相对亮度是怎么算出来的
比较两种颜色之前,先要求出每种颜色的相对亮度 L(0 代表黑色,1 代表白色),分三步:
- 把 R、G、B 各除以 255,得到 0 到 1 之间的值 s。
- 把经过伽马编码的 sRGB 值还原为线性光量:s 不超过 0.03928 时取 s ÷ 12.92,否则取 ((s + 0.055) ÷ 1.055) 的 2.4 次方。也就是靠近黑色的一小段用直线,其余部分用幂函数曲线。
- 按人眼对三种颜色的敏感程度加权求和:L = 0.2126 × R + 0.7152 × G + 0.0722 × B,系数来自 Rec.709 基色。
关键在于绿色的权重最大、蓝色最小。同样是通道值 255,纯绿 (#00FF00) 的亮度是 0.7152,而纯蓝 (#0000FF) 只有 0.0722。 所以"看起来鲜艳"和"对比度高"完全是两回事。
再补充一个技术细节:sRGB 国际标准 (IEC 61966-2-1) 写的分界值是 0.04045,而 WCAG 2.x 正文用的是 0.03928。本工具遵循 WCAG 的数值。 对 0 到 255 的整数通道来说,两个分界值之间没有任何取值,所以无论用哪个,结果都一样(256 个通道值都核对过)。
对比度公式与 0.05 的作用
对比度 = (较亮颜色的 L + 0.05) ÷ (较暗颜色的 L + 0.05)。分子分母都加的 0.05,用来补偿屏幕上反射的环境光,以及显示器的黑色并非真正为 0 这一事实。 有了这个修正,黑色 (L=0) 对白色 (L=1) 的比值是 1.05 ÷ 0.05 = 21,所以结果一定落在 1:1 到 21:1 之间。哪个是文字、哪个是背景并不影响结果, 白字黑底和黑字白底都是 21:1。
达标标准一览
WCAG 所说的"大号文字",是指 18pt(CSS 24px)及以上,或者粗体时 14pt(约 18.67px)及以上的文字。1pt 等于 1/72 英寸,CSS 的 1px 等于 1/96 英寸,所以 pt 乘以 96/72 就是 px。
| 类别 | 尺寸标准 | AA 最低 | AAA 增强 |
|---|---|---|---|
| 普通文字 | 不属于下面两种情况的所有文字 | 4.5 : 1 | 7 : 1 |
| 大号文字(常规字重) | 18pt = 24px 及以上 | 3 : 1 | 4.5 : 1 |
| 大号文字(粗体) | 14pt = 18.67px 及以上 | 3 : 1 | 4.5 : 1 |
非文字元素另有标准。成功标准 1.4.11(非文字对比度,WCAG 2.1 新增)要求输入框边框、复选框、带含义的图标等用来识别控件及其状态的界面元素,与相邻颜色的对比度至少为 3:1。 上面结果区的"界面组件与图标"标签检查的就是这一条。另外,成功标准 1.4.1(颜色的使用)要求不能只靠颜色传达信息;正文中的链接,常见做法是让链接色与周围文字相差 3:1 以上,或者再加下划线等线索。
灰色文字最浅能到什么程度
下表是白色背景上灰色文字的对比度,数值在页面构建时计算,小数点后第三位起直接舍去、不进位。
| 文字颜色 | 对比度 | AA 普通 | AAA 普通 | AA 大号 |
|---|---|---|---|---|
| #595959 | 7.00 : 1 | 达标 | 达标 | 达标 |
| #767676 | 4.54 : 1 | 达标 | 未达标 | 达标 |
| #777777 | 4.47 : 1 | 未达标 | 未达标 | 达标 |
| #949494 | 3.03 : 1 | 未达标 | 未达标 | 达标 |
| #AAAAAA | 2.32 : 1 | 未达标 | 未达标 | 未达标 |
| #CCCCCC | 1.60 : 1 | 未达标 | 未达标 | 未达标 |
在白底上,能满足 AA 普通文字 (4.5:1) 的最浅灰色是 #767676(4.54:1),再浅一级的 #777777 只有 4.47:1,不达标。肉眼几乎分不出差别,但自动检测会给出不同判定。 要达到 AAA 普通文字 (7:1),灰色必须深到 #595959(7.00:1)。占位提示和辅助说明里常用的 #AAAAAA 只有 2.32:1,连大号文字的 3:1 都不到。
纯色和品牌色往往比想象中低
| 文字颜色 | 背景 | 文字 L | 对比度 | AA 普通 | AA 大号 |
|---|---|---|---|---|---|
| 纯红 #FF0000 | 白色 | 0.2126 | 3.99 : 1 | 未达标 | 达标 |
| 纯蓝 #0000FF | 白色 | 0.0722 | 8.59 : 1 | 达标 | 达标 |
| 深绿 #008000 | 白色 | 0.1544 | 5.13 : 1 | 达标 | 达标 |
| 纯黄 #FFFF00 | 白色 | 0.9278 | 1.07 : 1 | 未达标 | 未达标 |
| 金色 #C9A961 | 白色 | 0.4166 | 2.25 : 1 | 未达标 | 未达标 |
| 金色 #C9A961 | 黑色 | 0.4166 | 9.33 : 1 | 达标 | 达标 |
| 纯蓝 #0000FF | 黑色 | 0.0722 | 2.44 : 1 | 未达标 | 未达标 |
纯红在白底上是 3.99:1。四舍五入后看起来像"4.00",但离普通文字要求的 4.5 还差得很远,不能用于正文。 本工具显示两位小数时采用舍去而不是四舍五入,原因就在这里:避免 4.496 被显示成"4.50 : 1"却判为未达标这种自相矛盾。 反过来,纯蓝在白底上高达 8.59:1,到了黑底却只剩 2.44:1。同一种颜色,换个背景,达标与否就可能完全颠倒。
计算示例
示例 1:深蓝 #1A1A2E 文字,白色背景。通道值 26、26、46 线性化后,R、G 约为 0.0103,B 约为 0.0273,加权求和得 L = 0.0116。 白色的 L 为 1,所以对比度 = (1 + 0.05) ÷ (0.0116 + 0.05) = 17.05 : 1,连 AAA 普通文字也有充足余量。
示例 2:纯红 #FF0000 文字,白色背景。只有红色通道为 255,L = 0.2126 × 1 = 0.2126。对比度 = 1.05 ÷ 0.2626 = 3.99 : 1。 大号文字的 AA (3:1) 能通过,普通文字的 AA (4.5:1) 不通过,所以像错误提示这样的小字,最好换成更深的红色。
示例 3:金色 #C9A961。它的 L 为 0.4166,属于中等亮度。白字与它的对比度只有 2.25:1,不到 3:1; 黑字则有 9.33:1。白字和黑字谁更占优,取决于背景的 L 是否越过约 0.179(= √(1.05 × 0.05) − 0.05),比这更亮的背景用黑字更有利。
建议色是怎么找出来的
没有达标时,工具把文字颜色分别向黑色和白色混合,用二分查找不断缩小混合比例,直到第一次满足目标 (4.5:1 或 7:1)。 这个过程只移动明暗,尽量保留原色的色相,并在两个方向中选改动较小的一个。如果背景处于中间亮度,两个方向都够不到目标, 工具会提示"只调整文字颜色无法达到",这时就得连背景色一起改。建议色只是一个起点,最终选色还要结合品牌规范来判断。
常见误区与工具的局限
- 图片和渐变上的文字:背景不是单一颜色时,一个对比度数值的参考意义有限。请分别检查文字背后最亮和最暗的位置。
- 透明度 (opacity、RGBA):半透明文字要先换算成与背景叠加后的实际颜色再输入。本工具不接受 8 位十六进制。
- 禁用状态的控件、装饰元素和标志:WCAG 对它们没有最低对比度要求,但用户仍应能看出控件处于禁用状态。
- 深色模式:浅色模式下达标的组合,不会自动在深色模式下达标,每种模式都要单独检查。
- 数值不是全部:字体过细、字号过小、反光眩光,即使对比度相同也会降低可读性。对比度只是下限,不是可读性的保证。被称为 WCAG 3.0 的后续草案正在探讨 APCA 等考虑字重和字号的新方法,但目前常用检测所依据的仍是本页的 WCAG 2.x 公式。
- 色觉差异:对比度只衡量明暗差异。如果信息只靠色相区分,部分用户会看不出来。可以用色盲测试体验一下不同人看到的颜色有多大差别。
如何使用检测结果
- 正文、按钮文字、表单提示等需要阅读的内容,至少以 AA 普通文字 (4.5:1) 为目标;标题等大号文字可以从 3:1 起。
- 把达标的颜色集中定义成 CSS 自定义属性,全站就能保持一致。需要把十六进制转成 RGB 或 HSL 时,可以用颜色转换器。
- 点击"复制结果",颜色组合、对比度和各项判定会以文本形式复制,方便贴进设计文档或无障碍检查记录。
- 各国、各行业对网站无障碍的要求不尽相同,不少规定会引用 WCAG。请查阅适用于你的最新规定,以及所要求的版本和等级,不要凭记忆中的数字做判断。
常见问题
亮度和对比度是一回事吗?
不是。亮度是单个颜色的数值,对比度是两个亮度之间的比值。另外,WCAG 的相对亮度对 R、G、B 分别乘以 0.2126、0.7152、0.0722,与三个通道简单取平均不同,绿色对亮度的贡献最大。
标志和装饰性元素也要满足这个标准吗?
WCAG 1.4.3 把标志文字 (logotype)、纯装饰内容、处于非活动状态的界面组件以及照片里的文字列为例外。不过像图标按钮这样传达信息或操作的图形,属于 1.4.11 的范围,需要 3:1。
差一点点没到 4.5:1 怎么办?
4.49:1 在标准上依然是未达标。自动检测和审核都不允许四舍五入,请把文字再调深一点,或者把背景调亮一点。建议功能会帮你找到最接近的达标颜色。
怎样判断文字算不算"大号"?
以实际渲染的尺寸为准:18pt (24px) 及以上,或粗体 14pt (约 18.67px) 及以上。由于用户可以修改浏览器的字号,拿不准时按普通文字的标准来处理更稳妥。
除了黑白,还有哪些高对比度的组合?
黑白的 21:1 是理论最大值。在白底上用深蓝或深灰代替纯黑,可以像示例 1 那样做到 17:1 左右,同时比纯黑更柔和、不那么刺眼。
输入的颜色会被上传到服务器吗?
不会。所有计算都在浏览器内完成,输入的内容既不会保存,也不会发送出去。