我们在设计网页、设计App的时候会担心文字是否能在有色背景上清晰显示,其实WCAG向我们提供了非常好的检查方案。检查颜色是否有足够的对比度应加入到设计检查的流程中来。

为什么要做颜色对比度检查?

对比度为3:1是[[ISO-9241-3]]和[[ANSI-HFES-100-1988]]为标准文本和视觉推荐的最低水平。使用4.5:1的比例来说明由于中度视力低下、先天或后天颜色缺陷或通常伴随年龄增长的对比度敏感度丧失而造成的对比度损失。

其基本原理是基于在ANSI标准中采用3:1对比度作为正常观察者可接受的最低对比度,以及b)人群中,20/40的视力与大约1.5的对比度敏感度损失。因此,20/40的用户需要3*1.5=4.5比1的对比度。根据类似的经验发现和相同的逻辑,视力为20/80的用户需要大约7:1的对比度。

对比度为4.5:1被选为AA级,因为它补偿了视力损失大约相当于20/40视力的用户通常经历的对比度敏感度的损失。(20/40计算约为4.5:1。)20/40通常被报道为大约80岁的老年人的典型视力。

7:1的对比度被选为AAA级,因为它补偿了视力损失大约相当于20/80视力的用户通常经历的对比度敏感度的损失。视力丧失程度超过这个程度的人通常使用辅助技术来访问他们的内容(辅助技术通常具有对比度增强功能,以及内置的放大功能)。因此,7:1级别通常补偿不使用辅助技术的低视力用户所经历的对比度灵敏度的损失,并且还为颜色缺陷提供对比度增强。

那么要求是怎样的?

准则依据三个合规性级别进行分级:A 级(最低)、AA 级以及 AAA 级(最高)。以下是各个级别的简要定义:

级别 A:​你的站点满足基本的、最低级别的无障碍性。要达到此级别,需满足所有级别 A 成功标准。
级别 AA:​这是要努力实现的理想无障碍级别,在此级别,站点满足基本级别的无障碍性,因此多数情况下大部分人都可以使用大部分技术访问站点。要达到此级别,需满足所有级别 A 和级别 AA 成功标准。
级别 AAA:​你的站点在无障碍方面达到了非常高的级别。要达到此级别,需满足所有级别 A、级别 AA 和级别 AAA 成功标准。

对比度检测工具

这里提供在Mac上非常好用的色彩对比度查看工具Contraste,这款工具是我用过最方便的色彩对比度检测工具。后来因为换电脑找不到了,在一次偶然的情况下发现了这个应用,立刻写文推荐!

官方网站截图

可以在官网下载,如果下载速度慢的话也可以点这里下载。

在这里为不是Mac的用户提供一个在线网站:webAIM颜色对比度检测

参考文档

创建无障碍内容(WCAG 2.1 合规性)-Adobe