toolfree

对比检测

依 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,对许多人来说会产生明显的光晕。通常 稍微退一点会比极端值好。

没有任何上传

在这个页面里计算。