我们总是期待更多的用户使用我们的产品,当用户量增长到一定规模时,无障碍设计就显得尤为重要。但目前有很多关于色彩对比度可访问性的原则被错误使用。
他们常不加思考的使用这些标准,而不是作为设计决策的一种依据。
误解1:WCAG要求对比度始终保持最佳效果
Web可访问性指南(WCAG)是一套用于确定可访问性色彩对比度的标准原则,然而,这些标准在实际应用中并不总是有效的。你应该使用它来指导你的设计决策,而不是完全的照搬使用。
WCAG标准不适用于白色文本的对比。下面的两个按钮都有蓝色背景,但一个是白色文本,一个是黑色文本。当你调研用户哪个按钮更容易阅读时,大多数用户会告诉你白色文本的按钮更易阅读,但是WCAG色彩对比度显示白色文本比率却不合格。
黑色文本的对比度为5.41,符合要求。然而,白色文本的对比度是2.94,这是不合格的。根据WCAG比率来看,白色文本按钮可阅读性不强,但实际上它更易阅读。
研究表明:正常视觉用户发现白色文本更易阅读,该原则同样适用于色盲用户。
这种误差同样发生在橙色背景上,白色是没有色调/饱和度的纯亮度,是对比度最强的。高亮度背景上的高亮度文本在计算时是呈低对比度的。但视觉上白色文本的按钮更易阅读是有道理的。
设计应该满足人们看到的,而不是计算的结果。这就是为什么设计师的眼睛总是在方程式外扮演着另一个角色。
误解2:文本必须符合3A标准
有人认为,所有文本必须符合最高级别的AAA标准,否则大部分用户将无法访问它。这种说法是错误的!
3A最小比率为:7:1,以补偿20/80视觉障碍的用户对比度缺失。但这些用户大多数都佩戴了眼镜来弥补视觉的障碍,所以3A的要求只适用于没有佩戴眼镜且有视力障碍的用户。
研究表明:低视力也与衰老有关,大部分人在70岁时视力开始下降,如果你的用户群是70岁以上,满足一些3A标准可以提升他们的阅读效率。
对于大多数用户来说,满足AA就足够了。2A要求对比度比率为4.5:1,以补偿20/40视觉障碍的用户对比度缺失。研究发现:大多数人在80岁时至少保持着20/40的视觉敏锐度。这一发现表明,满足2A的文本也可供大多数用户识别。
误区三:界面组件与文本具有相同的对比度标准
许多人认为组件与文本应保持相同的对比度标准,这是错误的!
组件的对比度为3:1,而文本为4.5:1。文本需要更高的对比度,因为用户需要阅读它,而组件不需要读取。
许多细微差别会影响文本对比度,比如字体大小和粗细。大文本(18pt或14pt粗体)可以使用较低的比率。不仅如此,某些组件也不受此要求的约束。在将界面组件或文本保存到标准比率之前,请确保在正确的情况下正确使用它。
误区四:灰色文本和按钮不可访问,看起来是禁用态
灰色文本是禁用态,不可访问无法阅读,这是错误的!
许多人认为用户无法阅读灰色文本,因为它看起来对比度很低。比如下面的按钮有灰色文本,有些人认为它是禁用态。不过,通过对比度计算显示,它远高于2A标准。
此标准还意味着,只要文本标签满足4.5:1的比率,按钮旁边的图标就没有对比度要求。
灰色按钮被用户习惯的认为是禁用态,当一个按钮很难阅读时,用户不必费心去阅读,这就是禁用按钮的目的,更不用说对比度了。
误区五:色盲用户分不清对比色
假如一个设计是使用颜色对比来传达信息的,色盲用户不会注意到差异,这是错误的!
颜色色相和颜色对比度是两个不同的维度,色盲用户难以区分特定的颜色色相,并不难区分颜色对比的差异。按钮可以只使用一种颜色,并有足够的对比度差异就可以了。
当颜色是绿色和红色时,且保持着相同亮度时,色盲用户很难注意到颜色的对比度,如下图示例,色盲用户几乎看不出有什么差异。
色盲有多种类型,但你最应该关注的是红绿色缺陷的用户,99%的色盲人群属于红绿色色盲。
误区六:光用颜色不足以传达信息
这是错误的!
颜色不应作为传达信息、指示动作或区分元素的唯一视觉手段。然而,本标准仅适用于不同颜色被赋予特定含义以通知用户的场景。换句话说,如果你使用颜色差异来传达信息,你需要一个额外的提示。但是如果你用明暗来传达信息,你不需要额外的提示,只要对比度差足够大也可以。
如下图toggle使用蓝色表示可交互态,但没有指定给蓝色的特定含义,可通过颜色对比度来传达信息。
颜色被赋予含义的另一个例子是表单字段上的错误提示。红色通常用于指示文本字段中的错误提示。在这种情况下,红色不足以指示错误状态,因为色盲用户看不到它。因此,你需要一个额外的提示,例如文本或图标,以指示错误状态。
另一个例子是使用颜色来表示页面上的系统状态。绿色和红色常被用来表示系统问题的严重性。在这种情况下,“颜色的使用”要求是适用的,因为颜色被赋予了特定的含义。但需要图标来帮助色盲用户区分每个系统状态。
误区七:无障碍设计需满足所有用户需求
这是错误的!
每个设计师都希望能满足所有用户的需求。尽管设计师们一直在努力做到这一点,但即使你遵循了WCAG的每一个要求,也不可能做到这一点。总有一些用户会发现你的设计让他们感到不安。
与其基于无法实现的幻想去追求理想,不如基于可实现的现实去追求理想。现实情况是,一个好的可访问性的设计不能满足每个用户的需求,但它可以满足尽可能多的用户的需求。
色彩对比度可访问性的细微差别
在为用户设计时,可访问性应该始终是重点关注点。WCAG指南是帮助你实现最高标准的可访问性设计的有效工具。
了解色彩对比度可访问性的细微差别将帮助你准确地满足WCAG标准。全面了解WCAG指南的使用,可以保持视觉上的简洁和美观,同时平衡它们与可访问性的关系。