如何为色盲用户设计更易用UI界面？

色彩在UI设计中扮演着不可或缺的角色。如果操作得当，它将改善用户体验，影响购买决策，并反映品牌的声音。

那么，您如何为色盲用户设计有效、可访问和美观的界面呢?

尽管色盲中暗含的科学是相当复杂的，而解决它的要旨是色盲的人很难看清颜色或区分一些颜色。考虑到这一点，在本文中，我们将分享一些关于如何提高站点的可访问性以及它为色盲人士提供的体验的技巧。

数据世界中的色盲

根据研究，大约每12名男性中就有1名(每200名女性中就有1名)是色盲。虽然色盲的人和其他人一样能看得很清楚，但他们不能完全分辨红、绿或蓝。还会有不同类型的色盲，其中红绿色盲是最常见的。

红绿色盲的人很难区分红色和绿色。同样的，对于红色盲的人来说，所有的红色看起来都很暗淡。

从设计的角度来看，这意味着仅依靠颜色来提高可读性和可承受性将使你的网站难以为色盲用户所用。

您可以使用Coblis色盲模拟器来查看您的站点对色盲用户的体验。

7种方法可以改善色盲用户的颜色可访问性

对于色盲用户来说，提高色彩可及性的设计元素和技术通常被认为是很好的设计实践。虽然你可能会认为如果你的网站设计为可访问性，你的网站的审美吸引力可能会受损，但事实并非如此。

在这里，我们将看看一些方法，您可以设计一个更容易访问的UI，使色盲用户记住。

第一条:使用模式与纹理

颜色差异在数据可视化中非常重要，例如，图形和饼图。选择对比度低的颜色会让色盲用户难以理解你的图表。

以下是你应该做的:

使用模式和纹理，让用户更容易区分不同的片段。

将文本标签添加到段中，使其更容易理解。

让我们来看看一个色盲的tritanopia患者是如何看到蓝绿色条形图的而他们是如何看到同样的条形图的。

如果你给每个片段贴上标签而不是使用模式，你会看到这样的效果:

第二条:使用颜色和符号

您不应该仅仅依赖颜色来传递错误或通过UI传递信息。

让我们看看Facebook的注册表单。如果表单仅仅依靠颜色来让用户知道他们在某个特定领域犯了错误，那么对于红盲(原生视)用户来说，它可能是这样的:

下面是Facebook的注册表单，上面有一些符号和错误信息:

在表单中使用图标和符号，让用户知道他们犯了错误，从而提高了可访问性，并帮助他们更快地纠正错误。

第三条:使用文本标签

使用颜色过滤器和色样添加文本标签可以提高色盲用户的可访问性。根据色盲的类型不同，如果没有某种描述性文本，用户可能很难区分不同颜色(或深浅)。

例如，如果没有亚马逊上的描述性文字标签，色盲用户就无法区分红色衬衫和橙色或绿色衬衫。

向颜色过滤器中添加文本标签也可以提高视力正常的人的可访问性。例如，在显示器上，白色、灰白色和浅灰色通常很难区分。

第四条:下划线的链接

很多时候我们使用字体颜色或字体权重来表示链接。虽然对于有申异症、精斜视或三斜视的人来说，区分固定文本和常规文本是可能的，但由于对比度低，这肯定不是理想的。

具有单色性的人根本无法区分文本和锚文本，他们必须将鼠标悬停在文本上，看看光标是否会变成指针。

因此，最好在文本链接中添加下划线。这样就很容易区分普通文本和锚文本。下面是Engadget网站上的一个例子:

第五条: 避免颜色组合

某些颜色组合并不适合色盲用户，要么是因为它们的对比度低，要么是因为它们很难区分。

下面是一些你应该尽量避免在界面设计中使用的颜色组合:

绿红

蓝绿

绿棕

绿黑

灰绿

蓝灰

荧绿和黄色

蓝紫色

下面是一对绿红色和蓝紫色的颜色组合，对一个有色盲的用户来说是什么样的：

第六条:使主按钮突出

很多时候，设计师依靠颜色来突出主按钮。问题是你使用的颜色可能会让色盲用户难以察觉。

以下是你应该做的:

增加主按钮的大小。

尝试不同的布局组合。

增加主按钮和辅助按钮之间的对比度。

使用边框、图标或字体权重来区分主按钮和辅助按钮。

例如，改造用大小和颜色强调主要按钮。

Firebox在右下角显示主按钮，在左下角显示二级按钮。

第七条:标记需要的表单字段

如果仅使用颜色在窗体上表示所需字段，色盲用户可能难以区分必需字段和可选字段。

相反,你会:

用星号(*)标记需要的字段。

标签字段与单词必需或可选。

从窗体中删除可选字段。

结论

为色盲用户设计UI将帮助您改善网站的可访问性，同时这也是为了视力正常的用户使用做出改善。虽然说到网页可访问性，并没有一种万能的解决方案，但是这里有一些你应该记住的建议:

1，使用图形和图表中的图案和纹理来显示对比度。

2，使用颜色和符号来传达错误消息。

3，向颜色过滤器和色板添加文本标签。

4，下划线链接区分常规文本和锚文本。

5，避免使用糟糕的颜色组合，如红绿色和蓝紫色。

6，使用大小、位置或字体权重使主按钮突出。

7，用符号(如星号)或标记所需的表单字段。

原文地址：https://www.secretstache.com/blog/designing-for-color-blind-users/