建站百科Website News

编者按：对于色盲症患者而言，我们设计师精心搭配的色彩很可能毫无用处，甚至会适得其反。该如何同时兼顾色盲患者的需求呢？今天这篇文章总结了5个巧妙的方法。想成为一个能解决问题而不是视觉驱动的设计师，这篇就不要放过了。

如果你的网站有色彩或对比度上的问题，可能会直接影响用户的访问。如果是商业网站，那么可能会直接影响用户的消费。幸运的是，这里有几点可以帮助你避免这些问题，提升网站的可用性，特别是对于色盲症的患者。

什么是色盲呢？

色盲并不有效指的是看不见颜色或者全部看成灰色。通常指的是色弱，或者对颜色的分辨能力较差。人有三种视锥分别感受红、蓝、绿色，当这其中一个视锥出问题的时候，就会造成色盲。

图中四个色轮 分别是 正常、红色盲、绿色盲以及蓝色盲 看到的色轮的表现。

较常见的两种色盲是 绿色盲和红色盲，男性患者要比女性多一些。其中绿色盲较常见，男性患病率为7%，女性则为0.5%。所以总共会有8%左右的人群会有色盲的表现，而这些是商业网站绝对不可能忽略的人群。

方法一：使用清晰的色彩名称

由于男性的色盲症患者较多，所以如果你的网站需要用户挑选颜色，特别是出售男性的服装的时候，要着重考虑这个问题。

对色盲症患者来说，他们可能很难理解衣服的真正颜色是什么。如果是实体店，他们可以问问自己的朋友；但是如果是网店，可能就会比较麻烦。

这个问题解决起来其实也比较简单，就是文字标注上清晰的颜色名称。在使用颜色的名称的时候，尽量不要用那些奇怪的名字，而是要用简单的“浅蓝色”、“深绿色”等等。

方法二，使用高效的颜色标签

另一个常见的问题是，有些网站会使用色块作为筛选按钮。如果只有色块的话，那么对色盲症来说非常不友好。（参见先进个色轮图）

有一些网站使用了纯文字来表示颜色，这个方法虽然对色盲症患者来说比较友好，但是对于普通人来说却稍显枯燥。

以色块作为普通的筛选按钮，当需要看到颜色名称的时候，可以在鼠标浮动在上的时候显示颜色标签。

较好的解决方法应该是这样的，同时显示色块和颜色标签。

方法三，不要用0对比度设计

适当运用对比度是形成视觉引导、建立视觉焦点的有效方法；合适的对比度更是将内容和链接清晰的展现给用户的先进方法。

有一些设计师常常使用0对比度以达到“优雅”的效果，但是对于可用性来说得不偿失。根据网页可读指导原则（Web Content Accessibility Guidelines ，WCAG）将对比度分成了三个等级分别为A、AA、AAA。网页中可读文字至少要达到AA级别，即4.5：1，较佳的对比度要达到7：1。 下面这个案例中对比度仅仅为2.36:1, 正常人看上去都有些吃力，对于色盲患者来讲更是噩梦。

颜色可及性设计（Colour accessible design）

你的网站对所有人，包括色盲患者有良好的用户体验。对以上的一些原则越熟悉，你就越可能避免一些错误的设计，而这些可能对你的网站，尤其是商业网站的效益带来极大的提升。