先说结论:三级不等于三色
打开一张报表,标题、数据和警告都用了鲜艳颜色,看似丰富,实际找不到重点。三级色图避坑要先纠正一个误区:三级描述的是信息权重,不只是颜色数量。一级应最先被看见,二级负责组织内容,三级用于补充或提示。若三种颜色饱和度都很高,视觉权重相近,层级自然失效。
三级色图避坑的核心不是记住几个色值,而是理解颜色为何会失效。常见翻车来自层级定义模糊、明度过近、强调色滥用和场景测试不足。本文从视觉权重、信息语义及设备差异三条逻辑拆解问题,并给出可以直接执行的检查方法。
打开一张报表,标题、数据和警告都用了鲜艳颜色,看似丰富,实际找不到重点。三级色图避坑要先纠正一个误区:三级描述的是信息权重,不只是颜色数量。一级应最先被看见,二级负责组织内容,三级用于补充或提示。若三种颜色饱和度都很高,视觉权重相近,层级自然失效。
人眼往往先感知明暗,再分辨具体色相。只更换蓝、绿、紫,却保持相近明度,彩色屏幕上似乎不同,转成灰度后可能完全重叠。稳妥做法是先用黑、灰、白搭好三级结构,再加入色相。相邻层级应保留可见的明度差,同时检查文字与背景对比度,正文尽量达到WCAG建议的4.5:1。
红色常被理解为错误或高风险,绿色常代表通过或正常。如果图中用红色表示普通类别A,用户可能误判其含义。另一处坑是把连续数值硬套红黄绿,导致中间值被理解为警告。制作前应区分顺序数据、类别数据和状态数据:顺序看深浅,类别看色相,状态才使用约定俗成的信号色。
三级色图在专业显示器上合格,不代表投影、打印和手机端同样清楚。交付前至少完成四项测试:缩小到实际尺寸、切换灰度模式、模拟常见色觉差异、换到普通屏幕查看。不要只用颜色传递信息,可同时加入图标、标签或纹理。总结来说,先定层级,再做明暗,最后加色和测试,能避开多数问题。