对比检测
依 WCAG AA 与 AAA 检查一般文字、大字与非文字元素的色彩对比,并提供最接近的合格建议色。
在你的浏览器中运行
16px 的一般文字——大多数正文的大小。
24px 的大字
大字指的是 18pt 以上,或 14pt 以上的粗体——大约是 24px 和 18.7px。它会改变判定结果,这就是为什么单一个数字不算答案。
非文字对比涵盖界面组件、焦点指示器与具有意义的图形。很少人检查,但经常需要。
单一个数字不算答案
对比度本身并不能告诉你一组颜色可不可以用,因为门槛取决于这些颜色用在什么地方。所以这里把五种 判定全部列出来。
| 对比度 | |
|---|---|
| AA,一般文字 | 4.5:1 |
| AA,大字 | 3:1 |
| AAA,一般文字 | 7:1 |
| AAA,大字 | 4.5:1 |
| 非文字(1.4.11) | 3:1 |
大字指的是 18pt 以上,或 14pt 以上的粗体——在 CSS 里大约是 24px 和 18.7px。一组 3.5:1 的 颜色,当内文用不合格、当标题用合格,这正是为什么只给一个「通过/不通过」的检测工具,回答的是 没有人问过的问题。
非文字对比适用于接口元件、焦点指示器、表单边框,以及任何带有意义的图形。很少人检查,却经常 是真正无法通过稽核的那一项——一条 2:1 的输入框边线,对很多人来说根本看不见。
对比度是怎么算的
算在线性化之后的通道值上,而不是原始数字上。
十六进位色码里的通道值是为了显示而编码过的,它们所代表的光量和数值并不成正比。计算亮度之前必须 先把 sRGB 转换函数还原回去,而略过这一步,正是许多自制检测工具在门槛附近和规格对不上的原因 ——通常是把不合格的判成合格。
这里的数字是对照 WCAG 规格本身的范例验算的,不是拿另一个计算器来比对。
建议的修正只动亮度
当一组颜色在「AA、一般文字」这一项不合格时,这里会给出最接近的合格颜色。
它是只调整亮度、固定色相与饱和度找出来的,因为一个会改掉色相的建议等于一个会被否决的建议 ——那已经不是品牌色了。用二分法找出最接近的合格亮度,而不是直接跳到黑或白,所以改动幅度是 能过关的最小值。
它没有告诉你的事
对比只是易读性的一部分。太细的字重、太紧的字距、太小的字级、太花的背景,都会在对比合格的情况下 让内容更难读。
而且合格到 AAA 的组合也可能很不舒服:纯黑配纯白是 21:1,对许多人来说会产生明显的光晕。通常 稍微退一点会比极端值好。
没有任何上传
在这个页面里计算。