阅读 729

这些 UI 框架都存在对比度问题 - WCAG

背景

作为一个 UI 框架开发者,越来越多的人反馈给我同一个问题:网页中一些链接的对比度有些低,导致在个别显示器上存在看不清的问题。对一些服务于中后台产品的 UI 框架来说,中老年的老板是一个特殊的群体,往往视力都没那么好,所以网页上文本的对比度就显得尤为重要。

不知道大家有没有注意到 Chrome 浏览器的控制台,在查看元素的 Styles 的时候,CSS color 属性的取色器有一个 Contrast ratio 属性,如下图:

这是一个知名 UI 框架的 A 标签的 color 属性,我们可以看到 Contrast ratio 的值为 3.24,同时有一个🚫失败的图标,说明这个网站链接的对比度存在问题,只有达到 4.5 以上才算合格。 那这是不是一个普遍存在的问题呢?然后我又查看了目前市面主流的一些 UI 库 A 标签颜色的对比度,分别如下:

  • Material Design 4.6
  • React Suite 4.51
  • Semantic UI 3.99
  • Bootstrap 3.98
  • Ant Design 3.24
  • Element UI 2.78
  • Layui 2.63

如果按照 Chrome 浏览器对比度 4.5 的要求,Material Design 和 React Suite 的链接颜色达到了要求,其他框架都存在问题,这是一个 Web 工作者忽视的普遍问题。 大家不妨打开自己的网站看一下,是否存在对比度的问题?

早在 2018年6月5日, W3C 组织发布了《Web Content Accessibility Guidelines (WCAG) 》2.1 版本,指南中涵盖了使 Web 内容更易于访问的各种建议, 它是我们 Web 工作者的基础指南,但是有些细节是我们容易忽视的,这里我们将对其中的对比度做详细分析。

对比度的标准

那么接下来,我们看一下这个对比度的标准是什么?

在 WCAG 2.1 中的 1.4.3 章节中有明确规定, 文本和图像文本的的对比度最小值为 4.5:1,也就是说低于这个值得对比度都不符合标准 。 对比度的计算规则我们可以简单的理解为两个颜色的相对亮度相除得到的值,比如:两个白色的对比度是 1:1 , 白色(#FFFFFF)与黑色(#000000)的对比度为 21:1,也就是说对比度的范围在 1:121:1 之间。

在 WCAG 2.1 的准则层,为了让准则具备可测试性,定义了一系列成功准则,提供了可测试的成功标准。 为了满足不同群体和不同情况的需要,对成功标准定义了三个一致性级别:

  • A 级 (最低)
  • AA 级
  • AAA 级(最高)

针对对比度要求分别有两个成功准则:

要满足 AA 级准则,文本视觉呈现及文本图像至少要有 4.5:1 的对比度,如果对比度不能达到这个标准,说明这个网站在 Web 内容无障碍阅读中存在问题。那是不是网页中所有的元素我们必须要求这个标准?当然不是,针对大号文本(18pt 或者 14pt 的粗体或者更大字体)最小对比度标准是 3:1

要满足 AAA 级准则,文本视觉呈现及文本图像至少要有 7:1 的对比度,针对大号文本以及大文本图像至少有 4.5:1 的对比度。

另外,对一些附属内容,比如纯粹的装饰元素,未激活的用户界面组件,文本作为商标名称的一部分等等是没有最低对比要求。

解决问题

大多数设计师的显示器往往是行业里顶配,显示器的色域自然会很大,在一些颜色的选择上往往就忽略的其他设备存在的问题。 如果没有条件去对所有的终端设备进行调配,那就请参考标准,按照准则的成功标准去进行设计。

我们多次与设计师沟通后,在 React Suite 4.0 版本中,针对颜色对比度做了改善,最低对比度从 3:1 调整到 4.5:1 满足了 AA 级标准。同时我们会在色板工具上提供对比度标准参考,方便大家在自定义主题的时候能够满足标准。目前 React Suite 还是 4.0 alpha 版本,还剩下一些测试等收尾工作,同时希望得到大家更多的宝贵建议

最后

在全世界存在很多弱视人群,我们会越来越贴心去照顾你的眼睛, 同时我们会为 Web 开发体验而努力。

关注下面的标签,发现更多相似文章
评论