导读

色盲或颜色视觉缺陷（CVD）影响全世界约12名男性中的1名和200名女性中的1名。这意味着，对于访问您的网站或应用的每100个用户，最多8个人实际体验内容可能会有所不同。但是，如何确保您的用户体验平等地吸引这些访问者？我们在这里帮助一下。因此，在您遇到恐慌之前，请先查看…

色盲或颜色视觉缺陷（CVD）影响全世界约12名男性中的1名和200名女性中的1名。这意味着，对于访问您的网站或应用的每100个用户，最多8个人实际体验内容可能会有所不同。但是，如何确保您的用户体验平等地吸引这些访问者？我们在这里帮助一下。因此，在您遇到恐慌之前，请先查看一下我们为设计颜色可访问性设计UX时需要考虑的问题。

首先，什么是色盲？

大多数色盲人能够看到的东西和其他人一样清楚，区别在于他们无法区分红色，绿色或蓝色光。不足之处是在一个突变的结果X染色体  -这意味着女性更容易被运营商比患者-而且它可以在3个主要方面体现。

最常见的是红/绿色盲，其中患者混合所有具有红色或绿色作为整个颜色的一部分的颜色。受Protan色盲影响的人对红光不敏感，而Deuteranopia的患者对绿色也有同样的问题。例如，一个有Protanopia的人会混淆蓝色和紫色，因为他们不能识别紫色的红色元素。第三种类型的色缺，Tritanopia，是最不常见的，是指难以区分蓝色或黄色光的患者。下面的图像显示了彩虹可能看起来像每个这些形式的色盲的个人。

0-Uii9mrOGKigLZ_xH

那么，我如何设计更好的颜色无障碍？

你可能会想：“为什么我应该为这么小的用户群设计？”但是一般来说，有利于彩色用户的元素实际上被认为是更广泛意义上的良好设计实践。因此，如果您的网站设计得很好，应该已经可供所有用户访问。

设计可访问性并不意味着您的设计的美学完整性需要受损。考虑到这一点，这里是您应该关注的一个colorblind友好的用户体验的五大要素：

1.使用颜色和符号

你不应该仅仅依靠颜色来传达信息; 例如，某些类型的色盲可能使得难以甚至不可能看到常见的红色错误消息。一种方法是在需要用户注意的地方使用颜色和符号。一个很好的例子是Facebook的表单域和附加的错误消息。

0-S83xonH1C8y9I4xr

有趣的事实：Facebook的标志和臭名昭着的蓝色方案是特别选择，因为马克·扎克伯格是红绿色盲，看到蓝色的最好的。

2.保持最小

你应该限制你为你的网站使用的调色板; 您在设计中使用的颜色越少，混淆的实例越少。

0-Y7Xrwqhs_5JLVZR4

不仅简约的设计是一个永恒和美观的趋势，它也有用，当你设计的颜色无障碍。

3.使用图案和纹理来显示对比度

对于需要强调的元素，尝试使用不同的纹理，而不是多种颜色。例如，色盲用户可能难以解释图形和图表。在这种情况下，最好使用对比模式，并尽可能放置文本。

0-jkbjgEVXBbfnQ5n_

4.对比色和色调要小心

而不是依靠黑白作为你唯一的对比色; 尝试在您的设计中使用一系列清晰对比的颜色和色调。例如，游戏Word Feud使用四种颜色的瓷砖，可以很容易地区分与那些有或没有色觉缺陷。

0-z_6B8P4R665UrLl_

5.避免错误的颜色组合

选择你的颜色组合时，你需要聪明。由于色盲会以不同的方式影响人，因此很难确定哪些颜色在网页设计中“安全”。话虽这么说，这里有几个颜色组合，以避免，因为他们是一个潜在的噩梦色盲用户：

绿色和红色

绿色和棕色

蓝色＆紫色

绿色和蓝色

浅绿色和黄色

蓝色和灰色

绿色和灰色

绿色和黑色

旁注：你怎么知道你是否色盲？

嗯…有些人去年不知道他们是色盲，因为效果可以相对被忽视，除非有人指出。下面的图片通常用于测试色盲 – 给它一个去！（您可以在本文底部找到完整测试的链接。）

0-0-16ACuizKwTlmiS

还是不确定？

石原色盲测试：您可以乘坐38板基础的测试，并得到反馈。

色盲检查：由Colorblindor创建的Android应用程序，你可以测试你是否在±60秒色盲。

Coblis：色盲模拟器：在这里你可以上传图片，并看看它什么样子，通过人与不同类型的色盲的眼睛。

移动应用：这里的3 Android和iOS应用专门开发帮助色盲用户。

结论

一般来说，UX设计师应该创建对所有人都可访问和用户友好的网站。不幸的是，在专门为色盲设计时，没有一个一刀切的解决方案，但有一些基本的UX设计原则，牢记，一定会有帮助：

不要只依靠颜色来传达信息

保持您的调色板限于2或3种颜色

使用纹理和图案来显示对比度

仔细选择任何对比色和阴影

避免使用不良的颜色组合