呆聋瞎，让用户体验设计体现商业价值 » Web Accessibility

Web Accessibility之为色盲设计(二)：检验设计的工具

呆聋瞎 — Mon, 20 Jul 2009 15:29:59 +0000

看前一篇文章[Web Accessibility之为色盲设计(一)：他们是谁？]的介绍，大家应该知道除了极少数的全色盲，其他色盲总是会看到一些颜色的。所以，最大的问题不是色盲用户看不到一些眼色，而是他们看到的颜色与一般人不同。那么，如果作为一个正常人，如何让自己的设计不会给色盲用户造成麻烦呢？我们需要检验工具——色盲模拟器，来帮助我们评估设计。色盲模拟器可以帮我们近似地模拟色盲的眼光看世界。下面介绍一些常用的色盲模拟器。

Color Oracle
Color Oracle 可以即时模拟常见的色盲：红色色盲，绿色色盲，和蓝色色盲，但不能模拟各种色弱和全色盲。它的模拟结果（各种网页、图片等）可以即时呈现。不过，需要额外安装Java运行环境。
下载地址

Color Oracle 效果图

Vischeck

Vischeck提供了网页模拟和图片模拟两种模拟器。网页模拟可以把指定的网页按照色盲的视角显示。同理，图片模拟可以把指定的图片按照色盲的视角显示。它可以模拟常见的色盲：红色色盲，绿色色盲，和蓝色色盲，但不能模拟各种色弱和全色盲。Vischeck提供的网页模拟和图片模拟都需要使用它的在线服务才能完成（免费）。不过，它的图片模拟功能，提供了Photoshop插件。下载后，在photoshop里就可以实现图片的模拟，不用连接网络。

Vischeck 网页模拟器网址

Vischeck 网页模拟器界面

Vischeck 图片模拟器网址

Vischeck 图片模拟器界面

Vischeck photoshop 插件下载地址

Vischeck (photoshop 插件界面)

Coblis-color blindness simulator
这个图片模拟器支持几乎所有色盲、色弱模拟（需要使用它的免费在线服务才能完成）。但是，它对于需要模拟图片的容量大小有限制，而且模拟后的图片很小。

模拟器网址

Coblis color blindness simulator 界面和效果图

Colorblind Web Page Filter
这个模拟器可以模拟几乎所有的色盲种类（包括色弱，全色盲）浏览指定网页的情景。不过，需要使用它的免费在线服务才能完成，而且产生模拟后网页的速度很慢。

模拟器网址

Colorblind Web Page Filter 界面

Color scheme designer
Color scheme designer是一款比较适合视觉设计师的在线配色工具，可以模拟几乎所有色盲看到的不同颜色情况，但不支持图片和网页的色盲模拟。它不兼容IE6的浏览器，使用时请用IE7以上的版本，或者用最新的火狐浏览器。

模拟器网址

Color Scheme Designer 界面

总结
我个人比较推荐使用Color Oracle，因为它是即时模拟的，不像其它的一些模拟器只提供在线服务，有网速限制。甚至有的模拟器网络连接速度极慢，比如：Colorblind Web Page Filter。虽然Color Oracle只支持红色色盲（Protanopia），绿色色盲（Deuteranopia），和蓝色色盲（Tritanopia），但是对于设计师发现容易混淆的颜色已经够了，换句话说，如果上面提到的色盲都在使用你的产品或服务时，都没遇到“颜色”问题的话；相对来说，有颜色辨别能力更强的色弱用户就更应该没有问题了。

另外，色盲模拟器的局限性要提一下。由于人类个体的差异，没有哪个色盲模拟器可以真正模拟每个色盲实际看到的是什么，现有的这些模拟器的算法来源于样本量很小的实验，模拟器并不能精确到每个色盲个体。我们只能通过他们粗略知道哪些颜色容易引起混淆，影响用户的使用。以后的文章会进一步讨论设计哪些界面元素时要避免“不安全的颜色”，以及如何选择安全的颜色。敬请期待。^^

Web Accessibility之为色盲设计(一)：他们是谁？

呆聋瞎 — Sun, 21 Jun 2009 09:45:54 +0000

不同人眼中的草莓: 1.普通人 2.红色色盲 3.绿色色盲 4.蓝色色盲 5.全色盲

缤纷多彩的世界，如此吸引人。但是，每个人眼中的世界却可能如此不同。这个世界上有大约8%的男性和0.4%的女性，在识别部分或者全部颜色时有困难。我们通常笼统地称这种缺陷为色盲(Color Blindness)。其中，轻度的色觉异常称为色弱。对于如此多的特殊用户，无论是出于专业精神还是商业利益，互联网设计师都应该去关注他们的痛苦。

色盲的生理缺陷真的会影响他们使用互联网么？对于这个问题，可能有些设计师脑子里一下子想到是初中体检时检查色盲小册子。不过这个例子有点极端。因为它是科学家们臆想出来的，他们把色盲最易混淆的颜色放在一起了。但是，真实生活中可能就没有这么极端的例子了。我们需要的是真实的情景情景，而不是仅仅孤立地完成非别颜色的任务。有些人也许会想到就是红绿灯。但是，网站里可没有红绿灯。好吧，我们来举个真实例子。

普通人看苹果的网站

2009年6月29日iphone上市，一时间苹果的专卖店外排起了长龙。这期间在苹果的官方网站提供了一个在线工具（如上图），帮助用户来查询哪些专卖店明天有货。苹果的设计师用红色填充的圆圈表示有货，绿色的圆圈表示没货，貌似挺清晰的，对于普通人当然没问题。但是看看下面的图，你就知道了，对于绿色色盲来说，就不容易了。

绿色盲看苹果的网站

作为苹果公司这样引领设计方向的领头羊，也能犯这样的错误，实在令人遗憾，好在这个页面已经不存在了(苹果网站的截图来自一个细心老外的博客)。我们再来看看一个国内网站的例子。

: 搜狐主导航的问题：1.主导航 2.普通用户视角 3.红色盲用户视角

上面的图片中1号图是搜狐的主导航。看到字体为红色的栏目，有点设计经验的人都知道，设计师想视觉上强化这个几个栏目，引导用户点击。再说白点就是：用红色吸引用户注意，增加点击的率。对于普通用户来说，他确实做到了。但是对于红色色盲用户来说就未必了。上图中3号图是红色色盲用户可能看到的情景（3号图是色盲模拟器模拟的，以后的文章会作相应的介绍，不用着急^^）。暗红的颜色在红色色盲用户眼中是偏向深棕色的，相对于其他栏目的黑色字体，并不容易区分，就更别提强调了，当然对于用户的引导也就无从谈起。

好吧，现在你相信了色盲在使用互联网时也可能遇到麻烦了。为了帮助他们解决问题，我们需要进一步了解他们。色盲的从临床边的表现来讲可以分以几类：

左图：普通人右图：红色色盲

红色色盲（Protanopia）:不能区分红色和绿色.由于红色色盲看红色的时候有亮度的缺失，对于红色色盲来说红色会变得偏暗，越深的红色越趋向于黑色。

左图：普通人右图：红色色弱

红色色弱（Protanomaly）：红色色弱和红色色盲相似。不过，红色色弱有一定能力可以区分红色和绿色。但是并不意味着，他们可以像普通人一样看到实际的红色和绿色。和红色色盲近似，红色色弱看红色会偏暗。

左图：普通人右图：绿色色盲

绿色色盲（Deuteranopia）：和红色色盲一样不能区别红色和绿色。对于红色，没有亮度的缺失。绿色色盲看红色并不会偏暗。

左图：普通人右图：绿色色弱

绿色色弱（Deuteranomaly ): 绿色色弱和绿色色盲相似。绿色色弱有一定能力可以区分红色和绿色。但是并不意味着，他们可以像普通人一样看到实际的红色和绿色。有小部分绿色色盲可以检查色盲的测试。

从临床表现来说，红色色盲、红色色弱、绿色色盲、绿色色弱，并没有很大的区别。统计起来，相比其它色盲，他们所占的比较最多（请参见本文章结尾的色盲现状）。因此，常常把他们统称红绿色盲。

左图：普通人右图：蓝色色盲

左图：普通人右图：蓝色色弱

蓝黄色盲（Blue-yellow Color Blindness）：难以辨认蓝色和黄色。蓝黄色盲包括蓝色盲（Tritanopia）和蓝色弱（Tritanomaly）。

左图：普通人右图：全色盲

全色盲是指眼球中椎状细胞缺少，或无作用，仅能依靠眼球中杆状细胞来感受视觉影像光线的强弱。其视觉所见的景像只有灰阶的色阶分布，眼睛对于亮度非常敏感，在白天的室外需戴上深色的太阳眼镜保护眼睛。

色盲现况（数据来维基百科：2009-06-22）

从色盲的人口分布来讲，男性明显多于女性。红绿色盲的人群中占绝大多数，而蓝色色盲和全色盲比较罕见。因此在做设计的时候我们会主要考虑红绿色盲。

介于篇幅的限制，先介绍到这里。以后的文章将结合色盲的特征，介绍一下检验设计的工具——色盲模拟器。预知后世如何，且听下回分解。（已经准备好两个盆了：一个西接红柿，一个接鸡蛋。如果有想扔的人，请扔到相应的盆中。^^）