患有色盲的用户是否能阅读您站点上的信息？

Robert Hess
2000年10月9日发布
2000年11月13日存档

我在前几篇文章中讨论了有关颜色的问题，一些读者还希望我能够谈谈如何在 Web 站点上选用颜色以使色盲患者能够正确查看。根据这些要求，我针对该主题进行了研究，希望我所提供的这些信息不但能够帮助您更好地认识到这一问题，而且还能有助于建立可读性更强的 Web 站点。

首先，我们要弄清色盲的确切含义。“色盲”并不表示色盲患者看不到颜色，或所看到的事物都是黑白的。也许使用另外一个术语，色觉障碍，更为确切。

绚丽多彩的世界

我们是通过眼睛，或者更确切地说，是通过眼睛中的“视锥细胞”来辨认颜色的。我们都在学校里学过，眼睛中有视杆细胞和视锥细胞，它们都具有感光性。视杆和视锥将光感传递给大脑，从而在大脑中生成图像，让我们看到周围的事物。

图 1. 正常色觉

我准备先花些时间来讨论一下视杆细胞和视锥细胞；如果您急切想进入正题，可以跳过此部分，直接查看解决方法。

视杆细胞的数目要远远多于视锥细胞，它们对光谱中间部分的亮度差异较敏感。如果只有视杆细胞，那么只能看到黑白图像。眼睛中的视锥细胞为我们提供色觉。视锥细胞可分为三种类型：

• L 视锥细胞（长波）主要对光谱的红色部分较敏感。
• M 视锥细胞（中波）对绿色部分较敏感。
• S 视锥细胞（短波）对蓝色部分较敏感。

虽然可见光谱上红色、绿色和蓝色的分布范围基本上均等，但 L 视锥、M 视锥和 S 视锥的感光性却有所不同，特别是 L 视锥并非严格地集中在光谱的红色区域。幸好视锥对光谱的感光性只是大脑对颜色信息解码过程的一部分，其它处理过程会将感光性的差异考虑在内。

图 2. 三条白色曲线表示三类视锥的感光性级别。黑色曲线表示视杆的感光性。
Dowling, John E. (1987); The Retina : An Approachable Part of the Brain
Belknap Pr; ISBN: 0674766806

休斯顿，我们有麻烦了

如果某一类或某几类视锥细胞的功能降低到正常水平以下，或者完全丧失其功能，色觉就会出现问题。由于影响色觉的基因属于 X 染色体，所以男性患色觉障碍的几率要比女性大得多。所有男性中，大约有 8% 都患有某种形式的色觉障碍，而只有大约 0.5% 的女性存在这种问题。

下面列出了各类色觉障碍的名称。我为每一类都准备了一个示例色环和色板。我找不到更多有关各类色觉障碍对颜色的识别程度的实用资料，但这些似乎是公认的光谱表示法。看过这些图片后，您可能会感到疑惑，为什么不是直接缺少“红色”、“绿色”或“蓝色”呢？这有两个原因。第一，如上图所示，视锥的实际感光范围并不是直接集中在光谱的特定区域内。第二个原因涉及大脑内部进行的进一步处理。这个处理过程实际上是将颜色和图像与视杆/视锥的感应联系起来，使色觉障碍患者最终看到的颜色更接近于实际颜色。

	红色盲：大约有 1% 的男性患有此类色觉障碍。 红色盲是指无法识别红色，也将其称为红色二色视。它是 L 视锥丧失功能的结果。L 视锥可使我们识别可见光谱中的红色部分。由于红色位于可见光谱的一端，L 视锥的感光范围只和其它两类视锥的感光范围有部分重叠，所以红色盲患者就明显丧失了对光谱红色一端的光的识别能力。 红色弱：大约有 1% 的男性患有此类色觉障碍。 红色弱是指对红色的识别能力较弱。当 L 视锥的功能尚未完全丧失，但又无法保持其原有功能水平的情况下，会出现红色弱。
	绿色盲：大约有 1.1% 的男性患有此类色觉障碍。 绿色盲是指无法识别绿色，也将其称为绿色二色视。它是 M 视锥丧失功能的结果。M 视锥可使我们识别可见光谱中的绿色部分。由于绿色在光谱中所处的位置、M 视锥（绿色）与 L 视锥（红色）之间感光范围的实际重叠，以及与 S 视锥（蓝色）之间的部分重叠，绿色盲患者对整个光谱的感光水平基本正常，但仍会混淆个别颜色。 绿色弱：大约有 4.9% 的男性患有此类色觉障碍。 绿色弱是指对绿色的识别能力较弱。当 M 视锥的功能尚未完全丧失，但又无法保持其原有功能水平的情况下，会出现绿色弱。
	蓝色盲：大约有 0.001% 的男性患有此类色觉障碍。 蓝色盲是指无法识别蓝色，也将其称为蓝色二色视。在各类色觉障碍中，蓝色盲最为少见。它是 S 视锥丧失功能的结果，S 视锥可使我们识别可见光谱中的蓝色部分。由于蓝色在光谱中位于相对于红色的另一端，而且 S 视锥与其它两类视锥的感光范围重叠区域更小，所以蓝色盲患者对整个光谱的感光能力都会受到很大的影响。 蓝色弱：是指对蓝色的识别能力较弱，但似乎从未有过此类色觉障碍的病例记录。其原因可能是，从总体来说，S 视锥只占人眼中视锥总数的 10%；等到出现明显异常时，多数情况下这类视锥都已经丧失了功能。

注：制作以上颜色示例的调色板，采自以下站点上的数据：http://www.labs.bt.com/people/rigdence/colours/colours1.html。

寻找解决方法

看过以上调色板中的颜色后，您可以更深入地了解患有某种色觉障碍的人之所以看不到您站点上颜色的原因，尽管您在为站点选择颜色时也花了不少力气。

下面具体举例说明。假设您面临以下情况：

单击绿色按钮继续。 如需帮助，请单击黄色按钮。 如要退出，请单击红色按钮。

看起来很简单，对吗？但如果您看到的颜色如下图所示，情况又如何呢？

或

或

我真诚地希望这种情况不会在 Web 站点上出现。用标签定义按钮会更容易，比如“继续”、“帮助”或“退出”；这样甚至还可以减少占用的页面空间。但是，的确会发生这类情况，而且不仅发生在 Web 站点上，还发生在现实生活中。

解决这个问题的方法是避免只用颜色来指示需要用户执行的操作或希望传递给用户的信息。相反，颜色只应作为对用户的一般提示。

颜色对比

正如以前在有关颜色的文章中所提到的，选择颜色时需要考虑的一个重要因素是要在前景色和背景色之间产生强烈对比，这样可以便于用户阅读信息。如果考虑到色觉障碍患者，这一点将更为重要。

请看看我在上面给出的色环，然后再看看本页顶部的正常色环。

您会发现，患有色觉障碍的用户所能识别的颜色要比色觉正常的用户少得多。而且色环上许多相邻颜色看上去实际上是相同的。为了了解这会对您的站点设计产生什么样的影响，我们来看一个颜色示例：

对，我知道这种颜色搭配并不合适，但在许多站点上都可以看到这样的颜色组合。您可能会觉得这些颜色过于鲜艳，但如果您是一个色觉正常的人，仍然可以阅读所显示的信息。但对于一个患有色觉障碍的用户又如何呢？

某些人可能会说，只要确保颜色搭配在调色板降至灰度时仍然具有明显的对比，就说明这种颜色搭配适用于色觉障碍患者。但我认为这种说法并不完全正确。让我们把这个图像所使用的调色板降至灰度，再看看它的显示情况。

您可能会认为，虽然这个配色方案相当糟糕，但对于色觉障碍患者来说却应该是安全的。果真如此吗？让我们来仔细看一看。这次，我们使用一个更接近于色觉障碍患者能见颜色的调色板：

红色盲：

绿色盲：

蓝色盲：

好象这种情况下蓝色盲患者是幸运的。我觉得他们看到的颜色比我这个色觉正常的人所看到的颜色更鲜明。但是您也可以看到，虽然使用灰度调色板显示时图像看起来还不错，但对于许多患有色觉障碍的用户来说，这种颜色组合明显不安全。

如果进行正确的颜色搭配，设计人员绝对不会选择这种特殊配色方案。他们会选择对比更强的颜色，使信息更适于阅读。但假设由于某种原因，必须使用这种“黄绿”颜色组合，设计人员又能采取什么措施呢？我们在以前的文章中已经介绍过，使一种颜色变暗，同时使另一种颜色变亮，可以增加这两者之间的对比度，因此，我们可以尝试保持颜色的色调不变，而更改其亮度和饱和度，从而增加其对比度：

正常：

红色盲：

绿色盲：

蓝色盲：

这种颜色搭配仍然不是很好，但却比原来的颜色组合要好得多。虽然只稍微做了一些改动，但已经使色觉障碍患者完全能够阅读页面上的文字，同时又保持了原有颜色搭配的基本意图。

如果您拥有一个可以从图像文件中抽取调色板的绘图程序，而且可以使用“最接近的颜色”和“保持指标”的方法应用调色板（如我所使用的 PaintShop Pro），就可以使用以下图像检查您自己的颜色搭配。“正常”图像表示 216 色的安全调色板（英文）；其它图像保持相同的指标，但颜色有所变化，分别代表各类色觉障碍患者所看到的颜色。

正常：

红色盲：

绿色盲：

蓝色盲：

将这些图像的调色板分别保存为单独的调色板文件后，请按照以下步骤测试您自己的图像：

1. 使用 PRINT SCREEN 键捕获配色方案的屏幕快照。
2. 将此图像粘贴到图像工具。
3. 使用“最接近的颜色”的方法应用“普通”调色板。
4. 使用“保持指标”方法应用色觉障碍调色板。

请注意，许多绘图程序可能都支持使用和处理调色板，但不一定会提供用于在导入调色板时保持颜色指标的选项。如果不能确定您的应用程序是否具有此功能，请询问该软件的制造商或其他用户。

颜色搭配要相辅相成

如以上示例所示，要选择适合所有用户查看的颜色往往非常困难。而且，由于不同用户的色觉障碍程度也各不相同（这将导致更大的颜色差异），使这一问题变得更为复杂。还应考虑到用户未对显示器进行适当调节的可能性。如果显示器调节不当，导致对比度过低，即使视觉正常的用户也很难辨认某些颜色。综合所有这些因素，就使得选择合适的颜色不但很重要，而且很困难。

选择 Web 站点的颜色时，也可以让用户指定网页上显示的颜色。这并不象听起来那样困难。级联式样式表中已经包括了“用户样式表”的概念，使用户可以指定自己的样式，覆盖 Web 设计人员原先使用的样式。但是，这种样式表对于普通用户而言构建起来有些困难，而且可能还会意外地弄乱 Web 页的布局。

一种比较简单的方法是使用用户为 Windows 操作系统所选择的颜色，来显示不同的 UI 组件。使用“显示设置”控制面板程序，用户可以先将显示颜色调整好，用于查看和使用 Windows 应用程序。如果使用相同的配色方案，您的 Web 站点应该是安全的。但这种方法也有一个不足之处，它并不适用于所有浏览器。目前，只有 Microsoft Internet Explorer 使用这些关键字。

要使用系统颜色，您只需使用适当的关键字，而不是颜色值。例如，不是使用：

<font color="#FFCC9"> 

而是使用 ：

<font color="windowtext">

这将使您的字体颜色与用户选择的 Windows 操作系统文本颜色相同。

下面列出了可用的关键字。第一个列表中包含与适当的“文本”和“背景”颜色组合相对应的关键字。

前景色			背景色			适当组合
	captiontext		activecaption	CaptionText 和 ActiveCaption 组合
	inactivecaptiontext		inactivecaption	InactiveCaptionText 和 InactiveCaption 组合
	buttontext		buttonface	ButtonText 和 ButtonFace 组合
	windowtext		window	WindowText 和 Window 组合
	highlighttext		highlight	HighlightText 和 Highlight 组合
	menutext		menu	MenuText 和 Menu 组合
	infotext		infobackground	InfoText 和 InfoBackground 组合

下面列出的颜色没有与之相匹配的对比颜色。它们不适合用作背景色或文本颜色，而应将其用作代表其名称所示功能的颜色。

不匹配的颜色：
	buttonhighlight
	buttonshadow
	threedface
	threedhighlight
	threedlightshadow
	threedshadow
	threeddarkshadow
	text
	appworkspace
	background
	activeborder
	inactiveborder
	windowframe
	scrollbar

我已对上期文章中介绍的动态 HTML 工具进行了修改，将其改造成为一个新的版本，为您提供各种系统颜色的调色板。如果您有兴趣在配色方案中使用这些系统颜色，可以作为参考。

虽然似乎所有这些都需要仔细思考，但最重要的是考虑要提供给用户的内容，并确保他们能够真正看到这些内容。这并不仅仅是选择漂亮的颜色组合这么简单，还需要考虑到视觉差异对我们所有人或多或少都有一些影响。

有关为色觉障碍患者设计颜色的详细信息，请参阅以下链接：

• Microsoft 可访问性 Web 站点（英文）
  该站点包含由 Microsoft 提供的有关如何让应用程序更适合于各类残疾患者使用的信息。还提供有关 Microsoft 将在其操作系统和应用程序中添加的辅助功能的信息。
• 但他们能看到吗？（英文）
  在这篇文章中，Microsoft 可访问性 (Accessibility) 总监 Greg Lowney 介绍了颜色在应用程序设计中所起到的各种作用，以及开发人员如何可以确保不同类型的视觉障碍患者能够使用其应用程序的方法。
• 色觉障碍患者的安全 Web 颜色（英文）
  这是一篇很不错的文章，BT 试验室的互动设计专家 Christine Rigden 向大家介绍了她在为色盲用户设计 Web 方面的研究成果。
• 有效的颜色对比（英文）
  Lighthouse International 视觉科学研究院的副院长 Aries Arditi 博士就如何有效选择几乎适合于每个人的颜色提供了一些基本指导，其中还包括许多示例图像。

---

MSDN Show 由 Robert Hess 主持。

已归档的 More or Hess 专栏

		2000年
9月11日		配色方案
8月14日		色环
7月10日		使您的世界绚丽多彩（英文）
6月12日		真是太奇妙了：浏览器中有高速缓存（英文）
5月9日		事情的实质与外表（英文）
4月10日		避免“滥信商务”（英文）
3月13日		服务简史（英文）
2月14日		回到 Windows 2000 的未来（英文）
1月10日		演变中的接口（英文）
		1999年
12月13日		达到和超过极限（英文）
11月8日		安全有利也有弊（英文）
10月11日		普遍适用（英文）
9月13日		您可以使用的脚本（英文）
8月9日		进行更深层的 Web 连接（英文）
7月12日		将它弄到网上去（英文）
6月14日		XML：逼近商业话题（英文）
4月12日		新的浏览器，新的特性，新的选择（英文）
3月30日		科技的未来发展（英文）
2月8日		是上网还是不上（英文）
1月11日		有关脚本的独家新闻（英文）
		1998年
12月14日		Web 应用程序轻率的一面（英文）
11月16日		使您的 Web 应用的实际效果与期望一样好（英文）
10月12日		应用程序的正确工具（英文）
8月17日		应用 Web（英文）
7月17日		正视它：我和你是一类吗？（英文）
6月17日		频道：前途未卜（英文）
5月20日		鼓足勇气，从简单做起（英文）
4月20日		常识与敏感（英文）
3月23日		您的 Web 观念是什么（英文）
2月23日		安全舞蹈（英文）
1月26日		您的 HTML 兼容吗（英文）
		1997年
12月23日		带框格（英文）
11月25日		让我动起来（英文）
10月12日		崇拜我吧，我是个网站设计者（英文）
9月22日		样式：不那么容易（英文）
6月2日		为彼此而制作？让您的网站浏览器彼此兼容（英文）
5月1日		废除用户税（英文）
3月27日		Vulcan 文档（英文）
2月27日		丑陋的 Web（英文）