数据可视化——彩色通用设计之色彩搭配(制作对色盲人群友好的图形和演示)

最新推荐文章于 2025-02-07 16:23:41 发布

微露

最新推荐文章于 2025-02-07 16:23:41 发布

阅读量9.8k

点赞数 5

分类专栏： R语言数据可视化文章标签：数据可视化配色对色盲人群友好冗余编码

R语言数据可视化专栏收录该内容

13 篇文章

订阅专栏

数据可视化——彩色通用设计之色彩搭配(制作对色盲人群友好的图形和演示)

概述：本文翻译Masataka Okabe的Color Universal Design (CUD------How to make figures and presentations that are friendly to Colorblind people博文，原文链接: http://jfly.iam.u-tokyo.ac.jp/color/#assign. 主要探讨的话题是如何制作对色盲人群友好的图形和演示，在数据可视化时这也是必须考虑的问题。文章层层递进，为我们的日常图形绘制和成果演示时提供了宝贵意见。特别是在绘制图形时，合理搭配颜色，以便将要表达的信息同样清楚地传递给非色盲人群和色盲人群，这对数据可视化时具有深刻的指导意义。

什么是色盲？
色盲人群如何看待颜色？
荧光染色图(显微镜图像和DNA芯片)
如何将红色转换为洋红色？
如何为三通道图片指定绘制的颜色?
冗余编码
冗余编码绘制图形的示例
如何选择更容易区分的颜色？
一组对色盲人群和非色盲人群都清楚的颜色
避免仅通过名称指示对象
演示时请使用绿色激光笔
检查彩色图像是否适合于色盲人群的软件

文章正文

色盲人群并非完全丧失色觉。色盲人群可以识别各种颜色。但对某些范围的颜色很难区分。

色盲的频率相当高。十二分之一的白种人(8％)，二十分之一的亚洲人(5％)，二十五分之一的非洲人(4%)的男性是所谓的“红绿”色盲。它比AB血型更常见。

观众和读者中总有色盲人群。一个有250人的房间里，应该有10个以上的色盲人士。如果您设计一个将由10000人使用的设施或工业产品，其中有400个将是色盲人士。(假设男性为50％，女性为50％。)

在准备演示文稿(论文，幻灯片，文档，广告，网页等)以及公共设施和工业产品时，请考虑到这一点。以下是关于如何使图形和演示文稿对色盲人群友好的一些评论。

	彩色通用设计的3(+1)原则
1	根据实际照明条件和使用环境，选择对各种色觉的人都可以轻松识别的配色方案。
2	不仅使用不同的颜色，还使用不同形状，位置，线型和着色图案的组合，以确保将信息传达给所有用户，包括那些无法区分颜色差异的用户。
3	清楚地说明希望用户在交流中使用的颜色名称。
+1	此外，旨在提供视觉上友好和美丽的设计。

对于科研工作者：

您提交的论文很可能会发送给色盲审稿人。假设你的论文将由三位白人男性审阅(考虑到目前科学界的人口数量，这并非不可能)，其中至少一人是色盲的可能性高达22％！
[22％= 1-(1-0.92)^3]

最重要的实用点(对于生物方面的科研工作者）：

在荧光双染色显微照片中，DNA芯片等中，不要使用红色和绿色的组合。使用洋红色(紫色)和绿色代替。(详见：3. 荧光染色图(显微镜图像和DNA芯片)——双通道图片)
对于具有三个或更多通道的显微照片，另外显示每个通道的灰度图像，或者显示最重要的两个通道为洋红色和绿色组合。(详见：3. 荧光染色图(显微镜图像和DNA芯片)——三通道图片)
对于图形和线形图，在图形本身上标记图形元素而不是使用单独的颜色编码值的图例，因为在较远处匹配相同的颜色是非常困难的。不要仅以彩色传达信息，还需要同时显示颜色和形状的差异(实线和虚线，不同的符号，各种阴影等)。(详见：7. 冗余编码绘制图形的示例)
红色不会显得鲜艳生动。避免在深色背景上使用红色字符。

1. 什么是色盲？

人眼有三种类型的视锥细胞。这些细胞表达不同类型的视蛋白基因，它们分别对红色，绿色和蓝色敏感。色盲是指其中一种视蛋白的功能丧失或受到干扰的情况。
Alt

图1 眼睛的结构

人们通过比较三种视锥细胞的输出来感知颜色。这称为三色性视觉(trichromacy)。然而，红色，绿色和蓝色视锥细胞的灵敏度谱有着重叠。(图2的第一个面板)

如果一种视锥细胞的功能丧失了，人们仍然可以使用剩余的两种视锥细胞识别出相对多的各种色调。但是某些颜色范围(例如红色和绿色之间)变得难以区分。这称为二色性视觉(dichromacy)。(图2的其余五个面板)

如果一种特定类型的视锥细胞的光谱发生了偏移，通常是因为视蛋白基因的突变，颜色视觉变得有点类似于二色性视觉的人。这称为异常三色性视觉(anomalous trichromacy)。颜色视觉如何受影响的程度取决于基因中突变发生的位置。一些异常三色性视觉的人的色觉与二色性视觉的人受到一样影响，有些几乎与非色盲人群的视觉相同。

大多数色盲是所谓的“红绿色盲”，在红色或绿色视蛋白基因中存在问题。具有突变的红色视蛋白基因的人称为红色盲者(protanope)，而具有突变的绿色视蛋白基因的人称为绿色盲者(deuteranope)。

有蓝色视蛋白基因问题的人称为蓝色盲者(tritanope)。这是相对罕见的，仅发生0.001％。

Alt

图2 色盲类型(并伴有白人男性的频率)

(no color blind：非色盲人群；protanope dichromacy：二色性视觉的红色盲者；deuteranope dichromacy：二色性视觉的绿色盲者；tritanope：蓝色盲者；anomalous trichromacy：异常三色性视觉)

2. 色盲人群如何看待颜色？

Alt

图3 色盲视觉模拟

(no color blind：非色盲人群；protanope：红色盲者(红色视锥细胞缺陷)；deuteranope：绿色盲者(绿色视锥细胞缺陷)；tritanope：蓝色盲者(蓝色视锥细胞缺陷))

红绿色盲的色觉

难以区分具有相似强度(亮度)的红色和绿色之间的颜色。混淆以某种对称的方式发生：“绿色和红色(green and red)”与“黄绿色和黄色(yellow green and yellow)”之间的差异特别小。
此外，由于覆盖最长波长范围的视锥细胞(红色视锥细胞)存在缺陷，因此红色盲者感觉“红色(red)”更暗。因此，“暗红色(dark red)”几乎和“黑色(black)”一样。
相反，虽然绿色盲者的绿色视锥细胞存在缺陷，但绿色盲者看到“绿色(green)”是没有问题的。这是因为蓝色和红色视锥细胞也充分覆盖了这一波长范围。

Alt

图4混淆红绿色盲的颜色组合

很难区分某些颜色，这些颜色只在其红色或绿色组成部分上有所不同。例如，“蓝色和紫色(蓝色+红色)(blue and violet (blue+red))”，“绿色和棕色(green and brown)”，“红色和棕色(red and brown)”。
与鲜艳的颜色(具有更高的饱和度)相比，低饱和度颜色尤其难以区分。例如，“天蓝色和粉红色(sky blue and pink)”，“灰色，浅天蓝色和淡绿色(gray, pale sky blue and pale green)”等。
为了弥补红色或绿色视锥细胞的缺乏，色盲人群更多地依赖于来自蓝色视锥细胞的信息。因此，他们往往比非色盲人群更容易分辨蓝色。例如，色盲人群认为“红色和绿色(red and green)”或“黄色和黄绿色(yellow and yellow green)”几乎是相同的颜色。但他们认为“绿色和蓝绿色(祖母绿)( green and bluish green (emerald))”是完全不同的颜色。(比较上图第五行中的矩形)
为了弥补色觉识别的低分辨率，色盲人群往往对亮度和饱和度的差异更加敏感。
颜色名称是依据非色盲人群看起来相似的颜色类别来命名。这种分类可能与色盲人群的色觉不兼容。因此，使用颜色名称进行沟通通常非常困难。
示例1： 相同颜色的不同名称—>上图的第三行和第四行。这些颜色在色盲人群看来都是“棕色(brown)”。但非色盲人群分别将这些颜色命名为以下颜色名称，如绿色，红色，橙色和棕色(green, red, orange and brown.)，而色盲人群无法分辨这些颜色。
示例2： 不同颜色的相同颜色名称 - >上图的第五行和第六行。虽然绿色和蓝绿色(green and bluish green)被非色盲人群归类为“相似颜色”，但色盲人群认为它们是完全不同的颜色，远远超过红色和绿色之间的颜色。

这些差异成为沟通不畅的原因。

蓝色盲者的色觉

虽然人类有三种类型的视锥细胞，但非色盲人群依赖于来自红色视锥细胞和绿色视锥细胞的信息来区分颜色。来自蓝色视锥细胞的信息的贡献相对较低。因此，即使蓝色盲者缺乏蓝色视锥细胞，但他们的色觉更接近于非色盲人群，而非红色盲者和绿色盲者。但是，蓝色盲者相比于非色盲人群对蓝色和绿色很难区别。

全色盲的色觉

如果两种类型的视锥细胞都有缺陷，则这类人群失去了色觉。这比蓝黄色色盲更罕见。严重的视力下降也会发生。

以下几节对于那些不是生物方面的科研工作者来说可能并不有趣。请跳至：6. 冗余编码

3. 荧光染色图(显微镜图像和DNA芯片)

色盲的科研工作者(尤其是生物学方面)面临的最大问题是从荧光图像中获取信息。

如今的数字成像系统，如共聚焦显微镜、CCD相机和阵列成像仪，可以很容易地改变每个记录通道的颜色。在准备演示文稿时，没有必要一定使用用于染色的颜色，请选择观众最容易理解的颜色组合。

双通道图片

荧光双染色和DNA芯片通常使用红色和绿色来显示每个通道。这给色盲人群带来了两个问题。

无法理解哪个部分标有绿色，哪个部分标有红色。

Alt

图5 典型的荧光显微照片

Alt

图6 模拟色盲人群看到这张照片的观感

(protanope：红色盲者；deuteranope：绿色盲者；tritanope：蓝色盲者)

无法区分“双阳性”区域。对于色盲人群来说，黄色(红色加绿色)看起来和亮绿色一样。

Alt
图7 上半部分：用一种和两种颜色标记的两个细胞的染色。下半部分：具有两种颜色对的DNA芯片。(protanope：红色盲者；deuteranope：绿色盲者；tritanope：蓝色盲者)

如何解决这个问题呢？

请使用洋红色(紫色)替代红色 。洋红色是红色和蓝色的混合物。虽然色盲人群很难识别红色成分，但他们可以很容易地识别蓝色的色调。双阳性区域变成白色，这对色盲人群来说是很容易区分的。
Alt

图8相同图片的红-绿色(上图)和洋红色-绿色(下图)显示

4. 如何将红色转换为洋红色？

转换非常简单。只需使用Adobe Photoshop等图像处理软件将红色通道的图像复制到蓝色通道即可。
Alt

图9 从红色到洋红色的转换

单通道图片

即使是单一染色的图像也会导致色盲问题。很多人展示的照片都是荧光染料的颜色。但还是有两个问题：

纯红色的图片对红色盲者几乎不可见(见下面的模拟)。即使是非色盲人群也很难看到蓝色图像。

图10 红色盲者看到的绿色和红色单染色图像的模拟

纯绿色和红色超出可打印的色域(颜色范围)。在已发表的论文中将失去微妙的层次。例如，亮绿色不可打印。亮绿色在打印时都会变成暗绿色，将失去有关信号强度的信息。

Alt

图11屏幕上的纯色图像(左)和打印时的图像(右)

因此，单色是色调再现的最佳选择。你能用颜色来传达更多的信息吗?如果您只想显示所使用的标签类型(GFP、Cy3等)，那么图例中的一句话就足够了。
Alt

图12 灰度图像

5. 如何为三通道图片指定绘制的颜色?

三通道图片

如果用三个标签染色，

显示每个通道的灰度图片。(当每个信号的分布很有趣时)。
显示洋红色和绿色的两个通道的组合。(当通道之间的空间相关性很有趣时)。

Alt

图13 三重染色

为图形指定颜色

Alt

色盲人群面临的四个问题：

无法区分某些颜色：蓝色和紫色/红色，橙色，黄色，黄绿色和绿色的符号和线条。
不能看到一些对象：深红色或洋红色的符号和细线；在黑色或深蓝色背景。
很难看到强调部分：黑色文字中的暗红色字符(对于红色盲者，暗红色似乎与黑色相似)。
很难说出颜色的名称：“识别色差”和“识别色彩名称”是完全不同的任务。

6. 冗余编码

Alt

不要只用颜色来传达信息，同时显示颜色和形状方面的差异。
除了颜色，使用以下组合：实心和各种虚线、各种阴影、圆圈，三角形和矩形、字母和数字等。
保持颜色数量最少：使用具有少量鲜艳颜色的不同符号的组合，而不是具有各种颜色的单个符号。
不仅要保持色调的对比度，还要保持亮度。
无需使用颜色名称即可进行交流。

7. 冗余编码绘制图形的示例

Alt

图14 线形图

左图仅使用颜色进行编码，而右图同时使用颜色和形状来区分不同的线条。

较粗的线条和较大的符号可以更容易区分颜色。(更多锥形细胞可用于颜色检测)。
线条有不同的形状(实线和虚线)，即使没有颜色，它们看起来也不同。
每个点(圆形，三角形和正方形)使用不同的符号。
避免使用单独的图例。标签直接显示在图中，用细线连接。这样就不需要比较两个较远处对象(线条及其图例)的颜色。即使对象仅相隔几厘米，这对于色盲人群通常也是困难的。
因此，改进的绘图即使没有颜色也可以传达足够的信息。例如，在以黑白方式传真或复制时，此图形不会丢失任何信息。

Alt

图15 颜色填充图

左边图形仅按颜色编码。由于选择了浅色和饱和度低的颜色，难以区分不同的颜色，也难以描述每种颜色的名称，使得难以沟通。要求读者将图表本身的颜色与单独的图例进行比较，这对色盲人群来说非常困难。
右边顶部的图略好一些。颜色更鲜艳，更容易识别。避免使用单独的图例，以便读者不再需要比较远处对象的颜色。
右边底部的图是最好的。它不仅使用颜色，还使用各种阴影。即使没有色觉，每个对象也清晰可辨。同样，此图像在传真或复制时不会丢失任何信息。

8. 如何选择更容易区分的颜色？

这仅适用于您使用冗余编码设计图形后(如上)。

对色盲人群友好并不一定意味着不应该使用颜色。即使对于色盲人群，颜色也是非常有用的线索，可以轻松快速地区分不同的对象。通过仔细选择具有各种色觉的人都容易识别的颜色，可以最大限度地发挥她/他的演讲的效果。

避免重要信息仅以颜色的形式传达。
避免文本和对象被背景遮挡。例如，文本/对象和背景之间的亮度和饱和度应该有足够的对比。避免使用具有相同亮度但仅在色调上不同的颜色组合。例如，绿色背景上的红色字符对于色盲人群是不可读的。在深色背景上使用明亮的文本/对象，反之亦然。
让文字和对象尽可能的粗或大。
当颜色编码对象的尺寸很小时，只有少数视锥细胞用于颜色识别。色盲人群区分细线和小符号的颜色特别困难。对于彩色编码的文本，请使用粗体字体，如Arial或Helvetica，而不是使用细长的Times或NewYork。
使用红色时的注意事项。
对于非色盲来说，红色是明亮鲜艳的颜色。但对于色盲人群，它就像蓝色或深绿色一样沉闷。特别是对于无法检测到长波长红光的红色盲者，暗红色几乎看起来像黑色。因此，避免在黑色背景上使用红色字符，包括黑板。请注意，对红色盲者，黑色文本和红色文本看起来相同。然而，色盲人群仍然觉得某些红色范围是明亮鲜艳的颜色。请使用朱红色(短波长的浅黄色的红色：RGB = 100％，32％，0％或＃FF2000)或浅红色(与白色混合：RGB = 100％，8％，8％或＃FF1414)，而不是纯暗红色(RGB = 100％，0％，0％或#FF) 。

9. 一组对色盲人群和非色盲人群都清楚的颜色

Alt

图16 对色盲人群无障碍的调色板

建议的彩色调色板：

(1) 对于色盲人群和非色盲人群都是清楚的。
(2) 色彩鲜艳，使得颜色名称易于识别。
(3) 在屏幕上显示时和打印时的颜色相似。
对于红色(red)，使用朱红色(vermilion)，因为红色盲者也可以识别它。
黄色和绿色之间的颜色都被回避，因为它们与黄色和橙色无法区分。
对于绿色(green)，选择蓝绿色(bluish green)，以便它不会与红色或棕色混淆。
因为紫色和蓝色很接近，对色盲人群看来都一样，所以选择了紫红色(reddish purple)。
在朱红色和黄色(vermilion and yellow)之间，选择具有不同表观强度的三种颜色。
选择天蓝色和蓝色(sky blue and blue)，以便可以区分亮度和饱和度的差异。
即使对于非色盲人群，蓝色和黄色的细线和小字符也很难阅读。对于细线和小的对象，使用深蓝色和橙色(darker blue and orange)比天蓝色和黄色(sky blue and yellow)更好。