颜色对比度检查器
根据 WCAG 2 和 APCA 检查文本颜色与背景颜色之间的对比度。此检查器根据相对亮度计算 WCAG 2 对比度,报告普通文本、大号文本以及 UI 图形是否通过 AA 和 AAA 标准,并提供 APCA 亮度对比值及其适用场景说明。适合构建无障碍界面的设计师和开发者。
常见问题
WCAG 各级别代表什么?
AA 级要求普通文本达到 4.5:1,大号文本达到 3:1(成功准则 1.4.3);AAA 级要求分别达到 7:1 和 4.5:1(1.4.6)。用户界面组件和有意义的图形与相邻颜色之间需要达到 3:1(1.4.11)。此检查器会报告是否通过这五项阈值。
什么算大号文本?
WCAG 将大号文本定义为至少 18 磅的常规字重,约合 24 CSS 像素;或至少 14 磅的粗体,约合 18.66 CSS 像素。更小的文本都属于普通文本,需要达到更高的对比度。
为什么 4.499:1 的对比度未通过 AA?
WCAG 阈值是精确值,因此即使某个对比度四舍五入后为 4.5,只要实际值低于 4.5 就无法通过。此检查器会比较未舍入的比值,并将其截断为两位小数显示,因此显示值不会显得比实际值更高。
什么是 APCA?
可访问性感知对比算法(APCA)是为 WCAG 3 草案开发的对比度计算方法。它会模拟感知到的亮度对比,对文本和背景采用不同的处理方式,并返回约为 -108 到 106 的亮度对比值 Lc。它尚未纳入任何已发布的 WCAG 标准,因此合规性请以 WCAG 2 结果为准,并将 APCA 作为额外检查。
为什么 APCA 值有时是负数?
APCA 会考虑极性:正值表示浅色背景上的深色文本,负值表示深色背景上的浅色文本。指导建议使用绝对值,因此 Lc -75 和 Lc 75 属于同一等级。
APCA 指导等级是如何确定的?
这些等级遵循 APCA 青铜级简单模式:正文文本首选 Lc 90,最低为 Lc 75;其他内容文本为 Lc 60;标题和大号文本为 Lc 45;占位符等需要快速辨读的文本为 Lc 30;非文本元素为 Lc 15。字号和字重仍然会产生影响,因此这些等级只是起点,并非最终判定。
实现的是哪个版本的 APCA?
采用 APCA-W3 常量,版本 0.0.98 G,修订版 4g;对 sRGB 通道使用简单的 2.4 次幂,对黑色进行柔性钳制,并截断低对比度值。黑字白底的结果约为 Lc 106.0,白字黑底约为 Lc -107.9,与参考实现一致。
可以输入哪些颜色格式?
支持带或不带 # 的十六进制代码、CSS 颜色名称、rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()、color() 等颜色空间(例如 display-p3),以及 cmyk()。由于这两种公式都是针对 sRGB 屏幕颜色定义的,超出 sRGB 色域的颜色会先映射到 sRGB。
如何处理透明颜色?
测量前,半透明文本颜色会像浏览器绘制时那样与背景混合。半透明背景则先与白色混合。结果会列出实际参与对比的不透明文本颜色和背景颜色。
两种颜色的顺序重要吗?
对于 WCAG 2,顺序并不重要,因为较亮与较暗亮度的比值无论顺序如何都相同。对于 APCA,顺序很重要,因为文本和背景的权重不同,所以请在第一个字段中输入文本颜色,在第二个字段中输入背景颜色。