【第2349期】颜色对比度以及为什么你应该重新考虑它

前言

年纪越来越大，越来越模糊。今日前端早读课文章由@官其珍翻译分享。

正文从这开始~~

当您浏览您喜爱的网站或在您选择的设备上查看产品的最新版本时，请花点时间以不同的方式来看待它。从屏幕往后退一步。稍微眯上眼睛，这样你的眼睛就会被睫毛遮住。

• 你还能看到和使用这个网站吗？

• 您是否能够阅读标签、字段、按钮、导航和小页脚文本？

• 你能想象一个有不同查看方式的人会如何阅读和使用它吗？

在本文中，我将分享无障碍设计的一个方面：确保产品的外观和感觉(内容的视觉设计)能充分包容不同视力的用户。

使用NoCoffee低视觉模拟功能查看网页

我是PayPal无障碍小组的设计顾问。我将评估我们的产品设计如何达到wag 2.0的标准，并回顾我们公司的设计模式和最佳实践。

我创建了我们的“设计师的无障碍设计检查清单”，我将在本文中介绍清单上最有影响力的指导原则之一：确保所有内容都有足够的颜色对比度。我将分享我用来帮助我们的团队交付设计的策略、技巧和工具，大多数人都可以看到和使用这些设计，而无需定制体验

我们的目标是确保所有视觉设计在背景上满足正常文本和大文本的最小颜色对比度要求，如WCAG 2.0，级别AA，“对比度(最小值) ：理解成功标准1.4.3”中所述。

谁能从具有足够对比度的设计中受益？引用自WCA网站:

本规范采用4.5 : 1的比率，以说明中度低视力、先天性或后天性颜色识别缺陷或伴随衰老而导致的颜色对比敏感度损失。

作为无障碍顾问，我经常被问及有多少残疾人使用我们的产品。单纯的网站分析不会显示答案。让我们通过查看统计数据来估计有多少人可以从具有足够颜色对比度的设计中受益：

• 世界人口的15%，有着不同程度的残疾，包括视力、听觉、行动及认知障碍。

• 约有4%的人口视力低下，0.6%视盲。这些用户可能需要借助屏幕阅读器/盲文阅读器的帮助。

• 7-12% 的男性有不同形式的色觉缺陷（如色盲），不到1％的女性这样。他们难以区分某些特定颜色组合。

• 低视力状况随着年龄的增长而增加，50岁以上的一半人有一定程度的低视力低状况。

• 全球增长最快的人群是60岁以上的人。

• 过了40岁，大多数人都需要老花镜，才能清楚地看到小物体或文字。

让我们估算世界人口的10 %将受益于“更容易识别的设计”，再乘以使用您的网站或应用程序的客户或潜在客户的数量。例如，在200万在线客户中，20万人将受益。

一些与年龄相关的低视力状况包括:

• 黄斑变性：多达50 %的人受到年龄相关的视力丧失的影响。

• 糖尿病视网膜病变：在糖尿病患者中，眼睛中的血管破裂会使视力模糊并导致盲点。

• 白内障：白内障使眼睛的晶状体混浊，视力下降。

• 视网膜色素变性：这种遗传病逐渐导致视力丧失。

所有这些条件都会降低对比敏感度，在某些情况下还会降低区分颜色的能力。

色觉缺陷，也称为色盲，大多是遗传性的，也可由药物副作用和年龄相关的低视力状况引起。

以下是色盲的类型:

• 绿色盲：这是最常见的，并且对绿光的敏感度降低。

• 红色盲：这是对红光的敏感度降低。

• 蓝色盲：这是对蓝光的敏感度降低，但不是很常见。

• 全色盲：患有这种病症的人根本看不到颜色，但并不常见。

绿色盲和红色盲可能也难以区分 红色和绿色 或 含有红色或绿色 的颜色 。

不同的视觉体验

创建一个清单并要求你的设计师使用它很容易，但是在实践中你如何确保每个人都遵循这些指导方针？我们发现，设计师不仅要在理论上理解原因，还要亲身体验不同的视觉效果。我使用了一些策略：通过我们的无障碍展示让设计师沉浸在交互体验中，并通过软件模拟展示设计的外观。

在2013年中期，我们开通了PayPal无障碍展示(视频)。通过使用护目镜或辅助技术与网页交互，员工有机会亲身体验残疾人使用我们产品的感受。我们要求每个开发产品的人都参加一次体验旅程。用于设计具有足够颜色对比度的用户场景包括佩戴护目镜，该护目镜可以模拟低视力或部分视力和颜色缺陷的情况。体验者可以在PC、Mac或平板电脑上体验。对于移动体验，体验者佩戴护目镜并使用自己的移动设备。

有趣的事实：橱窗里的一面墙上涂着磁性涂料。墙上有我们希望人们记住的海报、信息和概念。在本教程结束时，我将在平板电脑上演示视觉模拟器来查看消息墙，以强调充分的颜色对比的重要性。

游客在佩戴护目镜，模拟低视力和色盲

无障碍展柜中使用的一些护目镜

软件模拟器

iOS和Android设备均可免费使用的移动应用程序:

• 色彩视觉模拟器。朝田一郎的应用程序模拟了三种颜色缺陷：红色盲( protanopia )、绿色盲( deuteranope )和蓝色盲 ( tritanopia )。您可以使用相机功能查看并保存模拟效果，该功能会在应用中截图。（适用于iOS和Android）

• VisionSim。布莱叶盲文研究所的应用程序模拟各种低视力状况，并提供每种状况的原因和症状列表。您可以使用相机功能查看并保存模拟效果，该功能会在应用中截图。（适用于iOS和Android）

色彩视觉模拟器

以下照片显示了通过色视觉模拟器查看的橙色和绿色按钮：

通过色彩视觉模拟器，绿色和橙色按钮显示正常（C），红色盲（P），绿色盲（D）和蓝色盲（T）

该例子突出了另一个无障碍设计准则的重要性：不要只使用颜色来传达含义。如果这些按钮是表示系统状态(如向上或向下)的在线图标，有些人将很难理解它，因为没有可见的文本，而且它们形状相同。在此场景中，应包括可见文本(即文本标签)，如下例所示：

在Photoshop中查看绿色和橙色按钮，使用绿色盲模式和正常模式的对比（添加文本标签）

移动设备模拟器

在移动设备上检查足够的颜色对比度变得更加重要。如果您有两部手机，通过visim或色彩视觉模拟器查看应用程序很容易。

如果只有一个移动设备，则可以执行以下操作：

• 使用内置相机在设备上拍摄移动应用程序的屏幕截图。

• 将屏幕截图保存到笔记本电脑或台式机。

• 打开并查看笔记本电脑上的屏幕截图，然后使用移动设备上的模拟器查看并保存模拟。

库比蒂诺的天气怎么样？

下面的例子突出了使用照片作为背景使用，同时使基本信息易于查看的挑战。请注意，大文本和粗体文本比小文本和小图标更易于查看。

用色彩视觉模拟器查看一款天气移动应用程序，从左到右为：显示正常，绿色盲，红色盲和蓝色盲

低视力模拟

使用visim应用程序，您可以模拟黄斑变性、糖尿病视网膜病变、视网膜色素变性和白内障。

正在使用visim模拟器查看天气移动应用程序

Adobe Photoshop

PayPal的团队使用Adobe Photoshop来设计用户体验的外观和感觉。到目前为止，还没有在Photoshop中内置颜色对比度检查器或测试器。但是设计师可以使用Photoshop中的一些有用的功能来检查他们的设计是否有足够的颜色对比度：

• “选择视图”→“图像”→“调整”→“灰度”，将设计转换为灰度。

• “选择视图”→“验证设置”→“色盲”，然后选择红色盲类型或绿色盲类型，模拟色盲情况。Adobe为色盲提供了软校验。

举个栗子

如果您使用渐变背景进行设计，请验证内容或文本渐变覆盖的最亮部分和最暗部分上的文本颜色和背景颜色的颜色对比度。

在下面的按钮示例中，第一个按钮的背景上带有橙色渐变的白色文本，不符合最低颜色对比度。下面列出了一些建议的改进：

• 添加符合的阴影颜色(中心按钮)

• 将文本更改为符合的颜色(第三个按钮)

在Photoshop中检查灰度和绿色盲，使用阴影和深色文本的修改版本比白色文本更容易阅读。

如果您设计的尺寸大于实际生产尺寸，请务必检查设计在实际网页或移动设备中的显示方式。

带渐变的按钮，从左至右：正常视图; 灰度视图; 绿色盲

在下面的表单范例中，正文文本和链接文本会同时传递白色和灰色背景的最小色彩对比度。我建议团队始终检查文本和链接的颜色对比度与所有背景颜色的对比，这是体验的一部分。

即使“注册”链接通过，如果我们以灰度级或绿色盲级查看体验，区分“注册”是一个链接可能很困难。要提高“注册”作为链接的易学性，请在链接下方添加下划线或链接整个短语“PayPal 新成员？注册”。

表格示例：正常视图; 在Photoshop中的灰度视图; ；作为证明的绿色盲视图

因为绿色盲和红色盲可能会比较难以区分红色和绿色，我们就应该避免使用它们吗？不一定。在以下示例中，红色减号(“-”)表示购买或付款，收到或退还的款项用绿色加号( " + " )表示。通过模拟绿色盲来查看设计，颜色的确不容易分辨，但形状是清晰和独特的。在日期旁边，说明描述了付款的类型。形状和内容都为信息提供上下文。

在此示例中还显示，用于购买和退款的行在白色和浅灰色背景之间交替。如果两种背景都使用相同颜色的文本，请确认所有文本颜色是否同时适用于白色和灰色背景。

正常视图和绿色盲视图：根据交替的背景颜色检查文本

在一些应用中，可以禁用表单字段 和/或 按钮，直到用户输入了信息。我们的设计指南不要求禁用元素通过WCAG 2.0的“对比度(最小值) ：理解成功标准1.4.3”：

附带：作为非活动用户界面组件一部分的文本或文本图像，……没有对比度要求。

在以下移动应用程序表单示例中，在输入电话号码和PIN之前，该按钮处于禁用状态。字段的文本标签在白色背景上采用非常浅的灰色，不会超过最小的颜色对比度。

如果客户解释那些低对比度表单被禁用，他们是否会认为整个表单都被禁用？

移动应用表单显示禁用的字段和按钮（左侧），启用（右侧）

在下面的示例中，相同的移动应用程序表单的大小与我在手机上看到的更接近。至少，文本颜色需要更改或变暗，以通过普通正文文本的最小颜色对比度并提高可读性。

为了帮助区分字段中的标签和用户输入的信息，请尝试探索表单字段的其他视觉处理方法。考虑反转前景和背景颜色，或者使用不同的字体样式来显示标签和用户输入的信息。

移动应用程序窗体示例：正常，灰度和绿色盲

适用于Chrome的无触点视觉模拟器

无触点视觉模拟器（NoCoffee Vision Simulator）可用于模拟在Chrome浏览器中可查看的任何页面上的色觉缺陷和低视力状况。使用“颜色不足”设置“色盲”，您可以查看灰度级的网页。

以下示例显示了与NoCoffee中提供的一些模拟相同的照片(具有号召性用语)。实际上，消息和号召性行动通过不透明的黑色容器与背景图像分离。这提高了消息的可读性和行动要求。测试大文本标题中蓝色与实心黑色通道的颜色对比度。请注意，链接“Mobile”不太容易看到，因为蓝色没有通过小型正文文本的颜色对比标准。可能的改进可以是将链接颜色更改为白色并加下划线，和/或 使整个短语“更多地了解移动设备”成为链接。

使用NoCoffee模拟色盲（无色），绿色盲，红色盲

使用NoCoffee模拟低视力，糖尿病视网膜病变，黄斑变性和低视力加视网膜色素变性

使用模拟器

模拟器是一种很有用的工具，可以帮助你想象一个设计如何被那些上了年纪、低视力或有色觉缺陷的人看到。

对于设计评审，我使用模拟器来模拟灰度级的设计，并且我可能使用色盲过滤器来显示设计师在颜色对比度方面可能存在的问题。我问的一些问题是：

• 有什么难读的吗?

• 行动呼吁容易找到和阅读吗?

• 链接与其他内容有区别吗?

在学习了如何使用模拟器来建立同理心并以不同的方式看到他们的设计之后，我要求设计师使用工具来检查颜色对比度，以验证他们的所有设计是否满足WCAG 2.0 AA的最小颜色对比度。清单中包括了一些可以用来测试其设计的工具。

我们的目标是达到WCAG 2.0的对比度，一般文本为4.5到1，大文本为3到1。

普通文本和大文本的最小尺寸是多少?该指南提供了关于WCAG对比(最小值)的大小比率的建议:理解成功准则1.4.3，而不是针对正文文本的最小尺寸规则。正如WCAG的指南所指出的，薄的装饰字体可能需要更大或者更大胆。

颜色对比度检查器

我们在设计师的清单中引用的工具如下:

• WebAIM颜色对比检查器（WebAIM Color Contrast Checker），一个基于浏览器的工具，测试用十六进制值指定的颜色代码。

• Paciello Group的颜色对比检查器，是一种适用于Mac或PC的应用程序，用于测试RGB值中指定的颜色代码。

有许多工具可以检查颜色对比度，包括检查实时产品的工具。我保留了一个简短的列表，以便于设计师知道使用什么，并允许一致的测试结果。

我们的目标是达到WCAG 2.0 AA的颜色对比度，一般文本为4.5到1，大文本为3到1。

普通文本和大文本的最小尺寸是多少？本指南提供了WCAG 2.0的“对比度(最小值) ：理解成功标准1.4.3”，但不是针对正文文本的最小尺寸规则。正如WCAG指南中所述，薄装饰字体可能需要更大 和/或 更粗体。

测试颜色对比度比例

你应该测试:

• 在设计的早期阶段；

• 在为任何产品或服务创建一个可视化设计规范时(此文档包含所有的颜色代码和用户体验的外观和感觉)；

• 所有不属于现有视觉设计指南的新设计。

为网页设计测试十六进制颜色代码

让我们使用WebAIM颜色对比检查器来测试一个白色背景上的样本正文文本颜色(#FFFFFF)：

• 深灰色文本(# 333333)

• 中灰色文本(# 666666)

• 浅灰色文本(# 999999)

我们希望确保正文和正常文本通过WCAG 2.0 AA。请注意，浅灰色（#999999）不会在白色背景上传递（#FFFFFF）。

使用WebAim Color Contrast Checker测试深灰色，中灰色和浅灰色

在该工具中，您可以修改浅灰色( # 999999 )，以找到通过AA的颜色。选择“变暗”选项以稍微更改颜色，直到颜色通过。通过单击颜色字段，您将有更多选项，并且可以更改颜色和亮度，如本示例的第二部分所示。

在WebAim颜色对比检查器中，使用“变暗”选项修改浅灰色，或使用调色板查找通过的颜色

表格式信息可以使用交替的白色和灰色背景来设计，以提高可读性。让我们测试灰色背景(#E6E6E6)中的中灰色文本(#666666)和浅灰色文本(#757575)。

请注意，在相同的背景下，中等文本通过，但较浅的灰色仅用于大型文本。在这种情况下，使用中灰色作为正文文本，而不是白色或灰色背景。浅灰色只适用于大型文本，例如白色和灰色背景的标题。

在灰色背景上测试浅灰色和中灰色文本

测试RGB颜色代码

对于移动应用程序，设计师可以使用RGB颜色代码来指定工程的视觉设计。你可以使用TPG色彩对比检查器。你需要安装PC或Mac版本，并与Photoshop一起运行。

让我们使用颜色对比检查器来测试中等灰色的文本(RGB的102 102 102和十六进制的#666666)和浅灰色的文本(十六进制的#757575)，灰色的背景(RGB的230 230 230和十六进制的#E6E6E6)。

• 打开颜色对比检查程序。

• 选择“选项”→“显示颜色值”→“RGB。”

• “算法”下选择“亮度”。

• 在RGB中输入前景和背景颜色：前景为102 102 102，背景为230 230 230。鼠标单击或选项卡通过字段查看结果。注意，这种组合适用于文本和大文本（AA）。

• 选择“显示细节”以查看关于AA和AAA要求的十六进制颜色值和信息。

颜色对比分析器和色轮来修改颜色

在我们的示例中，灰色背景的浅灰色文本(RGB中的117 117 117)不满足正文文本的最小AA对比度。若要修改颜色，请点击“颜色”选择框来查看色轮，以修改前景或背景。或者你可以选择“选项”→“显示颜色滑块，如例子所示。

色彩对比分析仪，带有RGB代码。显示颜色滑块以修改任何不符合最低AA指导原则的颜色

在大多数情况下，颜色的微小调整将满足最小对比度，前后的比较将显示更好的对比度如何使大多数人更容易看到和阅读。

最佳做法

测试颜色对比度，并记录所有设计元素使用的样式和颜色代码。创建视觉设计规范，其中包括以下内容:

• 所有文本元素的版式，包括标题、文本链接、正文和格式化文本；

• 图标、字形和文本等价物；

• 表单元素、按钮、验证和系统错误消息；

• 背景颜色和容器样式(确保这些背景上的文本都通过)；

• 禁用链接、表单元素和按钮(不需要通过最小颜色对比度)的视觉处理。

为开发人员记录可视化指南有几个好处:

• 开发人员不必猜测设计师想要什么

• 在质量测试周期中，工程师和设计师可以根据视觉设计规范验证设计

• 符合色彩对比设计辅助功能准则的参考点可被其他团队共享和使用

总结

如果您是一名设计师，请在您的下一个设计项目中试用模拟器和工具。花点时间换个角度看问题。一位著名设计师回顾了我的清单，给我讲了一个关于使用Photoshop的色盲证明的故事。在他自己的作品中，他用这些证明来完善公司产品设计中所用的颜色。当重新设计的产品发布时，他的CEO很感谢他，因为这是他第一次看到设计。首席执行官承认他是色盲。在很多情况下，你可能不知道你的同事、领导或客户有中度的低视力或色觉缺陷。如果满足某一特定设计元素的最小色彩对比度很困难，那么就接受超越颜色思维的挑战吧。你能不能创新，让大多数人都能在不需要定制的情况下使用你的应用程序?

如果你有责任鼓励团队建立更多可访问的网络或移动体验，准备好使用多种策略:

• 使用身临其境的体验来参与设计团队，并对不同的人产生同理心。

• 向设计师展示他们的设计如何使用模拟器。

• 测试具有低对比度的设计，并显示颜色的细微修改如何产生差异。

• 鼓励设计师尽早和经常地进行测试并记录视觉规范。

• 将可访问的设计实践整合到代码和设计中的可重用模式和模板中。

• 优先级和最后期限使得团队难以交付来自多个受众的所有诉求。请耐心和坚持，并继续与团队合作，寻找更容易让更多的人看到和使用的用户体验的策略。

关于本文 译者：@官其珍 译文：https://zhuanlan.zhihu.com/p/34665420 作者：@Cathy O’ Connor 原文：https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/

为你推荐

欢迎自荐投稿，前端早读课等你来。