📑 网站内容可读性差?你应该了解下 APCA (可访问感知对比度算法)

397 阅读13分钟

原文链接:git.apcacontrast.com/documentati…

文章的阅读有一定门槛,因此我在文中的引用内容里补充了一些知识点的介绍,帮助大家更好的理解文章内容。

为什么选择 APCA 作为一种新的对比方法?

可读性是网页内容的一个至关重要的方面,它会影响到 99% 的互联网用户。多年以来,WCAG 2.x 对比度指南在可读性方面提供了一些指导,但它会在未来的 WCAG 3.0 中被取代。在 WCAG 3.0 中介绍了这一变化的必要性,并讨论了候选的替代方案--APCA (可访问感知对比度算法)。

WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)

对比度问题

WCAG 2.x 对于网站颜色对比度的要求和相关的理解和指导诞生于一个智能手机和 iPad 还不存在的时代,当时显示器大多使用的是 CRT 技术,网站使用的都是 Web 核心字体。但那已经是十几年前的事了。由于计算机显示技术、网络内容、CSS 功能和视觉科学的巨大变化,WCAG 2.x 的对比度指南现在需要进行彻底的改革。

关于更深层次的背景,请参阅原作者于 2019 年 4 月左右在 WCAG 第 695 期 中发表的主题。

CRT 学名为“阴极射线显像管”, 是老式的那种大屁股显示器使用的显示技术,就像下图这种: image.png

WCAG 2.x对比度存在很多问题,其中之一是它的二进制 Pass/Fail 属性不能在感知和障碍方面以二进制方式应用,因为人类 感知是非线性 的,需要正确地模拟感知来确保准则是有效的。简单地 强制执行任意值的对比度 可能会带来更多伤害。因此,在考虑对比度时,需要考虑更复杂的感知因素,而不仅仅是强制执行特定值的二进制属性。

Pass/Fail 指的是使用二分法来判断对比度是否合格的方法本身存在缺陷。

让我们从对颜色和对比度的理解开始,下面概述了摘要。如果您需要更深入的了解,请参阅作者的白皮书 介绍颜色和可访问性,以及这份全面概述 对比度和颜色的现实与神话

什么是可读性对比度?

像颜色一样,对比度并非 "真实的",它是一种感知,更多是你的大脑如何解释视觉差异的结果。它不是对两种颜色之间的距离或差异的简单衡量。

像所有的感知一样,对比度对相关的上下文是敏感的,这意味着它周围的东西和它的目的会影响你如何看待它。对比度还受到 "空间频率" 的实质性影响,这基本上意味着字体大小和重量,并且与我们大脑的亮度感知(又称亮度对比)密切相关。当涉及到 颜色对比度 时,例如色调/色度/饱和度,其影响与可读性不太相关。高明度/暗度对比是在最佳速度和理解力下流畅阅读的必要条件,特别是列或块中的小正文。

空间频率是指在空间中一个图像上连续变化的亮度、颜色或其他属性的频率。在视觉上,高空间频率的图案具有更多的细节和更小的特征,而低空间频率的图案则具有更少的细节和更大的特征。在网页设计中,对于不同大小和分辨率的屏幕,要考虑空间频率对比度的影响,以确保内容在各种条件下都有足够的对比度来保持可读性。 image.png

当超过一定的数量,对比度恒定性 就会生效,即进一步增加数学对比度值不会对可读性的感知对比度产生影响。高 "空间频率" 意味着更小更薄的字母。更小、更薄的字母或图形会降低感知的对比度。因此,文字和背景颜色之间的明暗差异必须增加,以补偿小而薄的字体。

"Contrast constancy"(对比度恒定性)是指我们的视觉系统能够在不同的光照条件下,仍然保持对物体之间对比度的感知一致性。具体而言,即使照明强度发生变化,我们仍然能够区分物体之间的明暗差异。这种对比度恒定性对于我们的视觉感知至关重要,因为它使我们能够快速、准确地识别和区分物体,从而更好地适应我们周围的环境。在可访问性设计中,对比度恒定性也是一个重要的考虑因素,因为它能帮助设计人员确保他们的设计在不同的光照条件下仍然易于使用和访问。 image.png

  • 流畅的可读性指的是关键的对比度,这是最佳阅读速度和理解力所需要的。Bailey 和 Lovie-Kitchin 博士的研究表明,与 Legge 最近博士和其他的研究一样,对比度必须至少是对比度敏感阈值(CS)的 10 倍,也就是 "仅仅是明显的差异"(JND)的点。为了在临界对比度以上有足够的对比度储备,20 倍是首选。
  • 可读性指的是不费吹灰之力就能读懂,尽管不一定能达到最好的速度或准确度。在这种情况下,对比度需要是JND的三倍。
  • 各种形式的视力障碍不仅仅包括视力,也就是将眼睛聚焦到一个清晰的图像的能力。涉及眼睛或大脑的与对比度敏感性有关的损伤可能对整体视力产生更大的影响。

这些因素定义了 “超阈值临界对比度可读性区域”。简单来说,我们将其称为 “可读性对比度”。类似的超阈值存在于字体大小方面的视力敏锐度,这与由空间频率驱动的对比度相关的字体大小不同但是另外的一个因素。

超阈值临界对比度可读性区域:指在超过某个特定阈值时,视觉系统开始能够感知到某个特定的视觉特征。在这种情况下,超阈值临界对比度是指在超过某个对比度阈值时,文本能够被视觉系统清晰地识别和阅读的最小对比度范围。

换句话说,字体的大小与一个人的聚焦能力有关(由眼科检查表上的 20/2 0或 6/6 这样的数字来定义),而字体的大小和重量也直接影响到对比度感知,影响的因素包括 留白字母和行距字母的长宽比(高与宽) 等等。

点读对比度(Spot-reading-contrast) 的要求比 流畅的可读性对比度 (fluent readability contrast)要更低。非文本对象的对比度,例如对于实体图标,也可能有较低的亮度对比要求。并且在颜色(色调或饱和度)对于信息编码等事物的重要性方面存在一些差异。

没有单一的数字可以作为两种颜色之间对比度的普适目标,而不考虑使用情况、大小、厚度等因素。关于这一点,已经证明了 WCAG 2 的对比度标准有时可以通过本应不可读的颜色,而有时数学计算又会失败,将本应很容易被读取的颜色组合判定为不可读。例如下面这个例子:

对比度问题

4.5:1 作为指导方针目标存在的问题不仅影响了可访问性,而且还影响了标准视力。WCAG 2.x 对比度计算的问题已经被人们所道,并受到广泛的批评。

"4.5:1" 是指 WCAG 2.x 中对于文本和背景颜色之间对比度的最低要求。它表示文本颜色和背景颜色的亮度之比,其中第一个数字表示文本颜色的 相对亮度值,第二个数字表示 背景颜色的相对亮度值,两者相除得到的结果必须大于等于 4.5 才符合 WCAG 2.0x 的要求。 image.png

一些研究表明,色盲类型并没有得到很好的服务。WCAG 2.x 对比度规范常常会给设计师带来很多麻烦,以至于被忽略掉了。直至今日,大约 86% 的网站未通过 WCAG 2.x 的对比度要求,其中有些失败并不是由于真正的可访问性问题,而是由于 WCAG 2.x 对比度计算的错误。

在上面这段话中,作者强调了单一数字对于对比度并不适用于所有情况,而需要考虑其他因素。此外,作者还指出了 WCAG 2.x 对比度标准存在的问题,包括错误的数学计算和忽略了色盲类型等视觉问题,导致很多网站无法通过 WCAG 2.x 的对比度要求。

解决方式:APCA

Accessible Perceptual Contrast Algorithm (APCA) 是一种计算和预测可读性对比度的新方法。APCA 是更大的 S-Luv 可访问颜色外观模型的一部分,称为 SACAM(以前称为 SAPC)。这些模型与自发光 RGB 计算机显示器和设备的颜色外观特别相关,也用于模拟可访问的用户需求,重点是可读性。

亮度对比 (Lc)

其中一种叫做 “Lightness contrast(Lc” 的计算方法会基于 最小字体大小颜色 对来生成一个 亮度/暗度 对比度值,这个值是基于感知的:也就是说,无论两个颜色有多亮或多暗,Lc 60 的对比度值都代表相同的可读性对比度。这与 WCAG 2.x 截然不同,WCAG 2.x 对于暗色调的颜色的对比度要求被夸大到极致,导致在颜色接近黑色时,4.5:1 的对比度可能在功能上难以阅读。因此,WCAG 2.x 对比度不能用于指导设计“深色模式”。

image.png

APCA 对比度值是感知上均匀的,并且在对比度一致性点附近旋转。将 APCA 值减半或翻倍将导致感知对比度减半或翻倍。高对比度对于小而细的字体有轻微的 加权

不同的用途,不同的对比度

APCA 有一组与用例相关的级别——例如,Lc 90 是 首选级别 ,Lc 75 是正文的 最低级别。 这使得使用 ACPA 变得简单,在易用性方面与 1.4.3 非常相似。

APCA 还有一个 可选的 查找表,用于将字体大小和粗细与可读性对比(Lc值)相关联。查找表允许更高的准确性,因此在设计中更加灵活。

失败的 Pass/Fail

通过一个固定的对比度比例来进行严格的 Pass/Fail 判断是不具有指导性的,并且并不能真正解决用户的需求。实际上,当涉及到对比度时,不同用户的需求是相互冲突的——对于一个用户来说好的对比度对于另一个用户来说可能是有害的。即使是对于字体大小也是如此。

这表明真正的用户个性化至关重要,但当前技术在这个领域仍然存在缺陷(仍需进一步完善)。然而,对于设计指南来说,我们可以制定一些目标和期望范围,以便使网站对所有用户都具有可读性。

原文中讨论了使用二分法来判断对比度的问题,并提出了一种新的方法,即 “可读性对比度”(readability contrast)。该方法考虑了不同的使用场景、大小、厚度等因素,不同的需求和用户群体,并生成基于感知的对比度值。因此,使用一个固定的对比度值作为衡量标准可能并不准确,需要根据实际情况和用户需求进行个性化设置

视觉对比

在下面的图表中,我们展示了 APCA 和 WCAG 2 的最小合格对比度。注意 WCAG 2 的例子在深色中变得不可读:

image.png

在深色模式中,这个问题尤为严重

image.png

用例范围

这些通用级别适合自己使用,无需参考查找表。APCA 将对比度记录为 为从Lc 0 到 Lc 105+ 的 Lc 值(亮度对比度)。对于可访问性来说,将 Lc 15 视为大部分用户的隐形点,而 Lc 90 则是正文的首选。

在范围上查看此内容以获得更深入的了解。

  • Lc  90 • 字体大小不小于 14px/字体粗细 400(正常)的流畅文本和正文列的首选级别。
  • Lc  75 •字体不小于 18px/400 的正文列的 最低级别。 对于可读性很重要的文本,Lc 75 应被视为最低值。
  • Lc  60 •建议用于非正文、栏或块文本的内容文本的最低级别。 换句话说就是希望人们阅读的文本。最小值:24px 正常粗细 (400) 或 16px/700(粗体)。这些值都基于参考字体 Helvetica
  • Lc  45 •较大、较重文本(36px 正常粗细或 24px 粗体)的 最小值,例如标题。这也是具有精细的细节的象形图的最低要求。
  • Lc  30 •上面未列出的任何文本的 绝对最小值。 其中包括占位符文本和禁用的元素文本。这也是大型/实体语义和可理解的非文本元素的最低要求。
  • Lc  15 • 任何需要可 识别 和可区分的非文本的 绝对最小值,并且其最小尺寸不小于 6px。这也包括禁用的大按钮。设计师应该将低于此级别的任何内容视为不可见,因为它对大部分的用户来说已经是不可见的。任何对于站点的使用、理解或交互很重要的项目都应该避免使用此最低级别。

这些数值定义了基本的最低标准,你可以把它们想象为旧版 WCAG 2中的 A/AA 级别。如果要达到 AAA 级别,只需将对比度值增加 Lc 15。同时,对于大字体,最高对比度值应该小于Lc 90。

范围性的评分

虽然 WCAG 3 的候选者仍在开发中,但它包括一个基于范围的一致性系统。虽然它考虑了多种因素,但它足够简单,可以完全自动化,并且不依赖于任何 Pass/Fail 二分法评分。

整体方法同时提高了设计灵活性和可读性。通过在最需要的正文块中增加对比度来提高可读性,并且通过放宽大型非文本元素的对比度来实现设计灵活性,这些非文本元素由于尺寸较大而不需要强力对比级别(导致较低的对比度)空间频率)。

出于演示目的,示例工具提供了最小字体大小和粗细与对比度的实时更新:www.myndex.com/APCA/ 单击色块以调出颜色选择器。

我们希望这能澄清感知准确的基于范围的模型的有用差异,作为未来最佳可读性的指南。

本文正在参加「金石计划」