色彩通用设计——插图色彩的选择

本文翻译自Masataka Okabed的文章Color Universal Design (CUD)

实际上我没有全部翻译,主要是选择了与科研绘图相关的部分。这篇文章主要立足于使颜色的使用对色盲人群更为友好。但其实由于科研论文在很多时候也会被黑白打印,所以这种情况下确保插图的可读性也是很重要的。


色彩通用设计(CUD)
对色盲人群友好的插图和报告

色盲并非是失去所有的色觉。色盲人群仍可以辨别较大范围的颜色,但可能对于辨别特定范围的颜色会存在困难。

色盲的发生率还是比较高的。约8%的白人男性以及5%的亚洲和4%的非洲男性是所谓的「红绿色盲」。这甚至比AB血型的人更常见。

在你的观众和读者之中总是会有色盲患者。在一间250人的房间中就会有超过十位色盲患者。如果你要设计可能会被一万人使用的设施或者产品,那么其中就会有四百人会是色盲患者。(假定一半是男性一半是女性)

因此在你设计准备你的报告(论文、幻灯片、文档、广告、网页等)、公共设施以及产品时,要提前考虑到这一点。以下是关于如何让插图和报告对色盲人群更为友好的几点建议。

色彩通用设计的3+1原则
1 选择各种色觉类型的人都能轻松辨别的色彩方案,要考虑到实际照明调节和使用环境。
2 除了使用不同的颜色,还要结合不同的形状、位置、线条类型以及色彩花纹来确保信息能够传达给所有用户,包括无法区别色彩的人群。
3 使用的颜色应能准确地被描述,便于用户在口头交流时能够说出颜色的名称。
+1 除此之外,要以视觉友好和美观的设计为最终目标。

色盲人群看到的颜色


图1. 模拟的色盲患者的色觉(后三列依次为红色盲、绿色盲、蓝色盲)

红绿色盲患者的色觉(红色盲和绿色盲):

图2. 会使红绿色盲患者迷惑的色彩组合

  • 难以辨认具有相似强度(明度)的红色与绿色。这种困惑有点像正常人去说明「黄绿和黄色」之间有什么区别一样,两种情况的差异相当小。
  • 此外,红色盲会感觉「红色」更深,因为感受长波部分的视锥细胞存在缺陷。因此「深红」会看起来像「黑色」。
  • 相反地,绿色盲虽然感受绿色的视锥细胞受损,但看到「绿色」却没有问题。因为这部分的波长可被蓝色和红色视锥细胞的感受范围重叠。
  • 难以区分某些只在红色或绿色成分上有区别的颜色。比如「蓝色和紫色(蓝+红)」、「绿色和棕色」以及「红色和棕色」。
  • 与鲜艳的颜色(高饱和度)相比,低饱和度的颜色会更难辨认。例如「天蓝和粉色」的对比与「灰色、浅天蓝和浅绿」的对比。
  • 为了弥补红色或绿色视锥细胞的缺失,色盲人群更依赖来自蓝色视锥细胞收到的信息,所以会比非色盲人群对于区分蓝色调更敏感。例如,他们会认为「红色和绿色」或「黄色和黄绿」是几乎相同的颜色。但他们会看出「绿色和蓝绿(祖母绿色)」是完全不同的颜色。
  • 为了弥补色调的低辨认度,色盲人群会对明度与饱和度更加敏感。

蓝黄色盲患者的色觉(蓝色盲):

  • 虽然人类有三种视锥细胞,但非色盲的人会重度依赖来自红色和绿色视锥细胞的信息来区分颜色。所以蓝色视锥细胞提供的信息贡献则相对较少。因此虽然蓝色盲患者缺少蓝色视锥细胞,他们的色觉相比红色盲与绿色盲会更接近非色盲的人。但是会比非色盲者更难区分蓝色和绿色。

完全色盲者的色觉:

  • 如果两种视锥细胞同时损伤,就会完全失去色觉。这比蓝黄色盲更加罕见。视力严重受损也会出现失去色觉的情况。

给绘图选择颜色

色盲人群可能会感到困扰的四个问题:

  1. 无法区分特定的颜色组合。
    例如用这些颜色绘制的记号和线条:
    蓝色和紫色;
    红、橙、黄、黄绿、绿
  2. 无法看到某些物体。
    比如在黑色或深蓝背景上的深红或洋红色记号以及细线条
  3. 难以看到某些被强调的部分。
    在黑色文本中的深红色字符。
    (红色盲患者眼中的深红与黑色相似)
  4. 难以说出颜色的名字。
    「认出不同的颜色」和「指出颜色的名字」是完全不同的。

「冗余准则」

不要只用颜色传递信息。要同时展示不同的颜色和形状。

冗余准则

除了颜色,还要使用以下的组合:

  • 实线与各种虚线
  • 不同的阴影
  • 圆形、三角形和矩形
  • 字母和数字
  • 其他
确保尽量少的颜色
使用鲜明的数量少的颜色搭配不同的记号而不是使用单一的记号搭配不同的颜色。
记住不只是色调存在对比,明度也存在对比。
尽可能保证用户在交流时可以不使用颜色的名字。

冗余准则的例子


图3. 折线图

左图只用了颜色,右图同时使用了颜色和形状来区分不同线条。

  1. 更粗的线条和更大的记号有利于区分颜色。
  2. 线条有不同的形状(实线和虚线),因此不借助颜色就能看出不同。
  3. 使用不同的记号作为散点(圆形、三角形和方形)。
  4. 不使用分离的图例。直接在图中做标记,用细线与对应的线连接。使用这种方式,对于距离较远的两个对象就不需要比较颜色了。不过如果距离很近的话,色盲患者还是会感到困难。
  5. 所以改进后的图片可以不依靠颜色就能传递足够的信息。举个例子,当这张插图是被传真或者黑白复印时依然不会损失信息。


图4. 填色图

最上方的图只使用颜色。而且选择了浅色和饱和度低的颜色,要区分颜色也很困难。同时,要指出每个颜色的名称的难度也很高,因此不利于交流。在看图时,读者必须将图与分开的图例进行比较。因此这张图对于色盲人群是非常难以阅读的。

第二张图要稍好一些。颜色更为鲜明,容易认出。没有使用分离的图例,所以读者不必将颜色与很远的图例进行比较。

底部的图片是最好的。除颜色外,还使用了不同的阴影。即使不依靠色觉也可以清楚地区别各个对象。而且传真或者复印时也不会损失信息。

如何选择易于区分的颜色

这一点只有在你基于冗余准则设计了插图之后才能适用

对色盲人群友好不意味着不应使用颜色。即使对色盲患者,颜色对于快速轻松辨认物体也是非常关键的。通过仔细地选择能被各种色觉类型的人轻松识别的颜色,可以使你的报告的效果最大化。

1) 避免重要的信息只能通过颜色的形式传递。
2) 避免文本和对象被背景掩盖。
例如,文本与对象应和背景在明度和饱和度上有足够的对比。避免使用具有相同明度,只在色调上不同的颜色组合。例如绿色背景上的红色字符对于色盲患者就是无法阅读的。应在暗色背景上使用明亮的文本或对象,反之亦然。
3) 文本应尽可能粗、对象应尽可能大
如果涂色的对象比较小,只有少数锥状细胞能被用于识别。色盲人群在辨认细线和小记号的颜色时会尤其困难。对于上色的文本,使用Arial或Helvetica这样的无衬线字体,而不是Times New Roman这类衬线字体。
4) 使用红色应谨慎
对于非色盲人群,红色是明亮和鲜明的颜色。但对于色盲人群,它就跟蓝色和深绿一样阴暗。尤其对于红色盲,无法感受到长波的红光,深红看起来几乎就像黑色。因此要避免在黑色背景上使用红色的字符,包括黑板。
但色盲人群仍能感受到部分看起来是明亮和鲜明的红色。所以不要使用纯的深红色(RGB=100%,0%,0%或者#FF),而是使用朱红色(稍带黄色的红色:RGB=100%,32%,0%或者#FF2000)或者亮红色(红色与白色混合:RGB=100%,8%,8%或者#FF1414)

色盲和非色盲人群都不易混淆的颜色组合


图5. 对于色盲患者无障碍的颜色表(Vermilion:朱红)

关于颜色表一点建议:

  1. 对于色盲患者和非色盲者都不易混淆。
  2. 使用鲜明的颜色,确保容易指出颜色的名称。
  3. 在屏幕上展示或打印时具有较好展示性(不偏色)
    • 对于红色系,选择了朱红色是因为红色盲患者也能很好辨认。
    • 黄色和绿色之间的颜色全部避免使用,因为难以与黄色和橙色区分。
    • 绿色系选择了蓝绿色,因为不会与红色和棕色混淆。
    • 因为紫色与蓝色较近,在色盲患者看来是相同的,所以选择紫红色。
    • 在朱红和黄色之间选择了三种强度不同的颜色。
    • 同时选择了天蓝和蓝色,因为它们的明度和饱和度上的差异能够确保被区分。
    • 即使对于非色盲人群,使用蓝色和黄色的细线以及小字符也是很难阅读的。所以对于细线和小的对象,使用深蓝或橘色会比天蓝或黄色更好。

当使用这个颜色表的颜色进行组合

  • 交替使用「暖色」和「冷色」。
  • 当同时使用两种暖色或两种冷色时,在明度或饱和度上要有区分。
  • 避免使用低饱和度或低明度的颜色进行组合。

发表评论

电子邮件地址不会被公开。 必填项已用*标注