为色盲用户提升网页可用性的实用设计技巧

根据Colour Blind Awareness的数据，4.5% 用户是色盲。如果您的网站受众主要是男性，则该数据可能高达8%。在网页和UI设计过程中，设计师很容易忽略色盲人群的实际情况。毕竟，大多数设计师本身并不是色盲。因此，我们应该如何在设计中考虑色盲和色弱的用户群体？

在以往的基础上，今天的文章总结了13条实用可行的建议，以改善色盲用户的浏览体验。当然，这种设计对普通用户也很有效。

什么是色盲

首先，色盲有很多种类型。然而，你不需要对所有的色盲都有一个清晰的概念。绝大多数色盲可以归因于几种颜色，无法看到特定的颜色，混淆颜色或区分特定的颜色。

这种情况无疑是困难的，但实际情况也可能使色盲用户的情况更加麻烦：显示器质量差、光线不足、屏幕耀眼、手机屏幕太小、远离电视等。

事实上，仅仅依靠简单的颜色可读性规则和普通的可供设计原则并不一定能解决这些问题。以下建议可能不是全面的，但绝大多数网页设计可能涉及的问题都覆盖在以下列表中。

1、文本可读性

为保证文本的可读性，应根据可访问原则选择背景色、文本色和尺寸：

“WCAG 2.0 AA 文本对比度要求达到4.5:标题文本达到3，标题文本达到3:1.(文本粗体14pt+，标题18pt+)——WebAim color contrast checker”

下面的案例显示了哪些搭配可以通过，哪些不能达到标准（passes=通过，fails=不通过）：

2、文字与图片的叠加

在图片和图片的混合排列中，文本和图片的叠加通常相对困难，因为在许多情况下，确保文本和图片之间的明显对比并不那么容易。

降低背景的透明度，或增加蒙古板，使文字更容易识别。

当然，你也可以用更引人注目的颜色来改变文本，或者增加阴影来提高对比度。

3、取色与说明

下面的截图是亚马逊购买页面上不同衣服的颜色分类。对于红绿色盲用户，他们可能会看到右边的页面。在这种情况下，没有文本标签来区分不同的颜色，红绿色盲用户无法区分差异。

然而，在桌面浏览器上，当用户的鼠标悬挂在颜色上时，他们可以看到相应的文本标签，但这种功能无法在移动终端上实现。

Gap 将文本标签添加到每种颜色以解决这一困境：

事实上，这种设计对普通用户来说也是非常实用和亲密的。例如，黑色和海军蓝，即使普通用户在屏幕上也不那么容易区分，添加标签可以更好地区分。

4、将有用的描述附加到图片上

下面的截图是SuperDry系列的t恤，网站将t恤描述为“Leaf Jaspe也就是说，它的配色灵感来自叶子，它的实际颜色包括绿色、黄色和棕色。

问题是，色盲用户首先无法区分它的实际颜色，需要依靠描述来理解，但描述中的Leaf 意思是树叶，而Jaspe 斑驳的意思其实不够直观。因此，最合理的描述应该是“Gray Green Leaf Jaspe"(灰绿色斑驳的叶子)。

5、链接识别

网页链接最好是可以的不用颜色就能识别出来。如果打开全色盲用户(完全无法区分颜色) UK GDS (英国政府数字服务)网站，然后他会看到下面的界面。在这种情况下，他们根本看不到网站中用颜色区分的链接。

为了找到链接，这些用户需要用鼠标光标来探索道路。光标沿着文本移动，直到他们看到箭头变成指针，他们才意识到这是一个可点击的链接。如果是在移动终端上，他们必须用手指一点一点地找到每个链接可能存在的地方。

添加图标描述的链接更容易被发现，而且如果没有图标，添加下划线也能带来很好的效果。

6、配色

在现实世界中，颜色往往是无法控制的：红苹果旁边可能有一堆绿叶。但事实并非如此。设计师通常有足够的权限来控制这些问题。应尽可能避免以下颜色匹配：

·绿色/红色/绿色/棕色/蓝色/紫色/蓝色/浅绿色/黄色/灰色/绿色/黑色

7、表单占位符

网页表单设计也存在问题，苹果官网创建Apple 在ID页面表中，每个字段都有相应的占位符，但占位符的对比度通常不够高，弱视用户很难区分。在这种情况下，字段的标签描述非常重要，但表没有，这是非常尴尬的。

然而，增加占位符的对比度并不是一个合理的解决方案，因为占位符必须清楚地区分用户后续输入的文本。

下面 Made.com 表格做得很好，他们通过标签清楚地解释了每个字段的内容：

8、首选按钮

界面中的首选按钮通常会用更显眼的颜色来强调，Argo 公司登录界面就是这样设计的。但是Argo 这种设计只是通过颜色来区分的，可能会给色盲用户带来麻烦。

相反，通过区分大小、位置、厚度、边框和图标，可以很好地缓解可访问性问题。例如，Kidly 的设计：

9、提示信息

通常，成功和失败的信息是通过绿色和红色来区分的。然而，这两种颜色只是使色盲用户难以区分，因此他们根本无法区分信息是对是错。然而，如果你只是添加一个“Success用户可以通过使用相应的图标来更直观地理解信息。

10、表单字段必须填写

通常必须填写的表单字段会用颜色(如红色)来区分，这也使得有些用户无法区分。

要解决这个问题，可以考虑以下方案:

·用星号来区分，更直接一点，写上“必填”，如果可能的话，删除选填字段，让所有内容都必填。

11、图表

通常，设计师会在图表中使用不同的颜色来识别不同的项目，色盲用户也会有识别问题。以下设计案例提出了一个很好的解决方案，右边的案例对色盲用户更友好：

尽量用纹理来区分，再加上文字的描述，让图表更容易理解，即使没有颜色也能区分。

实用工具

以下是为色盲用户设计的一些实用工具：

·Check My Colours·WebAim’s color contrast checker·I Want To See Like The Color Blind·Color Oracle