图片·设计发布日期 阅读时间约 6 分钟

照顾色觉多样性的配色|不只靠颜色传达信息的资料制作方法

用红色表示“注意”、用绿色表示“正常”来区分的资料,在有些人看来可能是同一种颜色。色觉差异并不罕见,据说男性中约每20人就有1人。本文整理难以区分的颜色组合,以及加上颜色以外的线索、做出任何人都能读懂的资料和图表的方法。

颜色的看法因人而异

人的眼睛有三种对光的波长起反应的细胞。其中某一种的工作方式与多数人不同时,特定的颜色组合就会看起来相似。据说在日本,男性约5%、女性约0.2%属于这种情况(许多其他国家的比例也相近),按40人的班级计算就有1人。这并不是罕见的特性,更现实的想法是:在你分发资料的对象中有这样的人是很正常的。

  • 最多的是难以区分红与绿的类型,红·橙·黄绿·绿看起来属于同一色系。
  • 难以区分蓝与黄的类型很少见。
  • 并不是完全看不出颜色,亮度和鲜艳度的差异仍能感知。
  • 也有随年龄增长的变化,例如晶状体发黄使蓝色系显得暗淡。
  • 手机屏幕的亮度、阳光直射、投影仪投放也会改变颜色。

也就是说,“在自己的屏幕上能区分”并不能保证对方也能看懂。配色上的用心不是特殊对应,而是和做出“投影或印刷时颜色偏了也不会出问题”的资料是一回事。颜色组合方法的基础请参阅什么是互补色,品牌色的确定步骤请参阅品牌色的选法,用三种颜色和面积比搭建配色的方法请参阅配色方法。

难以区分的组合与替换方案

要避免的是“只有色相不同、亮度相近”的组合。只要亮度有差别,即使颜色看起来相似也能区分。

要避免的组合会发生什么替换方案
红 × 绿看起来是同一系的褐色改为蓝 × 橙
绿 × 棕看起来几乎是同一种颜色把一方改为藏青
水蓝 × 粉看起来是同样的淡色大幅改变深浅
黄绿 × 黄边界消失把一方改为白底+边框
蓝 × 紫并排时难以分辨把紫色换成灰色
红字 × 黑背景沉下去读不清改为明亮的橙色或白色

犹豫时,以蓝和橙(或蓝和黄)为主轴是安全的。这两种颜色在任何类型的看法下都容易保留差别,转成黑白也有亮度差。需要三种以上颜色时,比起增加色相,像“深蓝·水蓝·橙·灰”这样拉开亮度台阶来增加更可靠。

加上颜色以外的线索

这种用心的核心不在于选色,而在于用两种以上的方式表示同一信息。把颜色当作辅助、把形状和文字当作主体来考虑,判断就会变得简单。

  1. 1

    加上形状或图标

    放上去掉颜色也能分辨的符号,例如○×△、对勾和叉、上下箭头等。折线图则改变标记的形状。

  2. 2

    写上文字

    比起用眼睛把图例的颜色和图表对应起来,直接在图表的线或柱旁写上系列名称读起来更快更准确。也省去了阅读颜色区分说明的麻烦。

  3. 3

    拉开亮度差

    用同色系区分区域时,要把深浅台阶拉大。相邻区域的亮度相近时,边界本身就会看不见。

  4. 4

    固定位置和顺序

    事先定好布局,例如“左边总是去年,右边是今年”,就能不依赖颜色读懂。图例的排列顺序也要与图表的顺序一致。

  5. 5

    使用线型或图案

    加上实线与虚线、实心填充与斜线等印刷后也能保留的差别。不过细密的图案投影时会糊掉,要用粗一些的图案。

只用颜色表示链接也是同样的问题。正文中的链接保留下划线,按钮用边框和留白让人知道可以点击,这样即使在颜色传达不到的环境中也能发挥作用。

在图表和资料中的实践

资料中最容易出问题的是系列很多的饼图,以及用红绿区分的表格。减少系列、直接放上标签,大部分问题就能解决。

常见做法会出现的问题改法
饼图有8个系列相邻颜色相似无法区分合并为前4项+其他
图例放在最右边需要用眼睛来回对照颜色在各区域内写上名称
用红绿表示盈亏无法读出正负加上△▲或+−等符号
从红到绿的热力图中间色看起来一样改为蓝到红等明度会变化的配色
用信号灯颜色的状态表无法分辨状态写上文字(正常·需确认·停止)

像一天的时间分配这类展示构成比的图表,比起饼图,堆积条形图或横向条形图往往更易读。项目名称可以直接写在条形内或旁边,颜色区分就退为辅助。制作方法和区别使用汇总在把一天24小时做成饼图的方法中,从记录中重新审视时间分配的步骤汇总在重新审视时间用法的方法中。

确认配色的方法

即使没有专门的环境,手边也有可以确认的方法。虽然不能完美再现,但大部分危险的配色都能通过这些方法发现。

  • 转成黑白:只剩下亮度差,边界消失的地方一目了然。
  • 黑白打印:对于投影或分发的资料,在这种状态下能读懂是实务上的最低要求。
  • 缩小后从远处看:缩小后颜色的差别减弱,只剩下亮度的差别。
  • 在手机屏幕上打开:根据亮度和显示设置,淡色很容易看不出来。
  • 遮住图例看看:如果仍然能读懂,说明颜色以外的线索已经足够。

黑白确认也可以用颜色残像错觉工具代替。载入图像后会生成黑白版,可以与彩色版切换比较,所以可以放入手边的图示或图表,确认边界不会消失。图像只在浏览器内处理。如果对颜色对眼睛的影响本身感兴趣,也请阅读什么是颜色残像错觉和错觉的种类汇总。

常见问题

照顾色觉的配色应该用什么颜色?
以蓝和橙(或蓝和黄)为主轴是安全的。在任何类型的看法下差别都容易保留,转成黑白也有亮度差。要避免的是红与绿、绿与棕、水蓝与粉这类只有色相不同、亮度相近的组合。需要三种以上颜色时,比起增加色相,用深蓝·水蓝·橙·灰这样的亮度台阶来区分更容易辨别。
资料中最好不要用红色吗?
使用没有问题。应该避免的是只有红色这种颜色在传达含义的状态。例如在表格中用红字表示“负数”时,加上△或−符号,即使颜色传达不到也能读懂。错误提示也一样,除了红框之外还要放上图标和文字。特别是黑色或深色背景上的红字会沉下去难以阅读,换成明亮的橙色或白色更可靠。
有没有确认自己的资料是否是难以区分的配色的方法?
最简单的是转成黑白看看。色相差消失只剩下亮度差,边界消失的地方马上就能知道。黑白打印、缩小后从远处看、遮住图例看能否读懂等方法也有效。本站的颜色残像错觉工具可以切换载入图像的黑白版和彩色版,也可以用来放入图表进行确认。
图表的颜色区分太多时怎么办?
首先考虑能否减少系列本身。饼图合并为前4项和“其他”,颜色数量会一下子减少。在此基础上不依赖图例,直接在各区域或线旁写上系列名称。如果确实需要那些系列,不要增加色相,而是用亮度台阶来区分;折线图则改变标记形状和线型(实线·虚线),加上颜色以外的线索。

本文介绍的工具

相关文章

图片·设计约 13 分钟

配色方法|70:25:5法则、3种颜色的选法与不出错的配色技巧

做网站、幻灯片或传单时,很多人都会遇到“颜色太多显得杂乱”“总觉得很业余”“被说文字看不清”这样的烦恼。配色常被认为靠天赋,但实际上专业设计师也是按照固定的步骤和数值标准来选色的。本文以“底色·主色·强调色三种颜色”和“70:25:5的面积比例”来搭建配色为主线,并结合可直接使用、附有颜色代码的配色示例,整理了基于色相环的配色方案、色调(明度与饱和度)的统一方法、颜色给人的印象、用对比度以数值确认可读性的方法,以及对不同色觉的照顾。

阅读文章 →