颜色对比度检查器
按照 WCAG AA 和 AAA 标准检查两种颜色之间的对比度。
如何使用 颜色对比度检查器
- 输入你的文字颜色(HEX 或 RGB)。
- 输入背景颜色。
- 查看对比度数值以及通过了哪些 WCAG 等级。
关于 颜色对比度检查器
文字在其背景下是否易读,这是可以量化衡量的,而不是主观品味的问题。WCAG 无障碍指南将其表示为对比度,数值范围从 1:1(两种完全相同的颜色)到 21:1(黑底白字)。以 HEX(#137256 或 #137)或 RGB(rgb(19,114,86))格式输入文字颜色和背景颜色,这个检查器就会给出精确到小数点后两位的对比度数值,并针对四项阈值分别给出通过或未通过的判定:普通文字的 4.5:1 和 7:1(分别对应 AA 和 AAA),以及大字号文字的 3:1 和 4.5:1。
计算方法采用官方的 WCAG 相对亮度公式——每个颜色通道先做线性化处理,再按人眼对亮度的感知程度加权——所以得出的数值与其他无障碍审计工具的报告结果一致。对比度始终是用较浅的颜色除以较深的颜色,这意味着即使把两个输入字段的内容互换,得到的数值也完全相同。
它比较的是两种纯色,所以无法判断文字叠加在照片、渐变或半透明遮罩上的可读性;遇到这些情况,需要先取样文字背后的实际像素颜色。它也不会扫描实时页面——颜色值需要你自己提供。如果想在粘贴前先转换某个颜色值,可以使用 颜色转换器;如果想围绕某个品牌色搭建一套能通过检测的配色方案,可以试试 色阶生成器。不会上传任何内容。
常见问题
需要多高的对比度?
普通文字至少需要 4.5:1,大字号文字至少需要 3:1,才能达到 WCAG AA 标准。AAA 标准则分别提高到 7:1 和 4.5:1。检查器会一次性测试这四项标准,让你清楚看到自己的配色通过了哪些等级。
什么样的文字算作大字号文字?
大致是常规字重下约 18pt(24px),或粗体下约 14pt(18.66px)及以上。比这更小的都会被当作普通文字,需要满足更严格的阈值。
可以输入哪些颜色格式?
三位或六位形式的 HEX(#137 或 #137256)以及类似 rgb(19,114,86) 的 RGB 格式。两个字段都可以接受任意一种格式,你也可以混合使用。
把哪种颜色放在哪个字段里有影响吗?
没有。计算公式是用较浅颜色的亮度除以较深颜色的亮度,所以无论把两种颜色输入到哪个字段,得到的比值都完全相同。
为什么明明通过了检测,我的文字看起来还是很难读?
这个比值只衡量你所提供的两种颜色。较细的字重、较小的字号、较差的屏幕素质,以及叠加在繁杂图片上的文字,都会影响可读性,却不会改变这个数值,所以应把“通过”视为最低门槛,而非可读性的保证。