U11.04.2Mark-vs-background contrast and adjacent-category contrast are two independent requirements设计

图元对背景的对比与相邻类别之间的对比是两项独立要求

别名: 类别区分 · 相邻对比

概念解释

一张多类别图表要可读,需要同时满足两项相互独立的对比要求:每个图元与背景的对比(保证"看得见"),以及相邻类别图元之间的对比(保证"分得清")。只检查第一项的配色经常在第二项上失败——五个与背景对比都达标的中明度色,彼此之间的差异可能低到无法区分哪根柱属于哪个类别。两项要求对应读者的两个认知任务:定位(找到数据在哪)与归属(这段数据属于谁),缺一不可。

机制

两项独立性的机制在于它们度量的是不同的颜色关系:对背景对比是"图元色 vs 单一背景色"的明度差,相邻对比是"图元色 A vs 图元色 B"的差异——前者只有一个参照,后者有 N-1 个参照对,且最佳背景对比(高明度差)往往与最佳相邻对比(明度阶梯分布)方向不一致。多类别配色的实际做法是分类色板(qualitative palette):按明度或色相均匀分布的颜色集合,其设计目标就是最大化相邻区分度;随意挑选"看起来不同"的颜色无法保证相邻对都可分。色觉缺陷让相邻对比问题加剧:红绿配色在红绿色弱读者眼中相邻对趋于同色,而这两个类别在视觉用户那里是分明的——可访问的类别色板需要通过色觉模拟(如色盲模拟滤镜)验证相邻可分性。形状、纹理与直接标注(在图元上标注系列名)是不依赖颜色的替代或增强通道:当相邻对比无法继续拉开时(类别数太多),用标注与形状补足归属信息的通道才是解法,而不是无限拉大色距。

边界

相邻对比的要求强度随类别数量递减的现实是类别数的上限:超过 7-9 个类别时任何色板都无法保证相邻可分(延伸至相邻知识:类别过多本身不可读),此时正确动作是合并类别、分面或图例交互,而非硬拉色差。相邻的定义也需澄清:并非所有类别对都相邻,检查的是图上实际空间相邻或图例中顺序相邻的对,堆叠图中则是堆叠次序相邻的对。时间序列多线图中"相邻"是同一点上垂直相邻的线——线间距本身是分离手段,颜色对比的要求可以相应放宽,两项要求在不同图形类型中的权重分配不同。

怎么落地

  • 配色后执行两项检查:每个色 vs 背景 ≥3:1;每对相邻类别的色差(ΔE 或对比度差)达到可辨标准。
  • 用色觉缺陷模拟(红绿色弱、蓝色弱滤镜)复查相邻类别的可分性。
  • 类别数超过 8 个时改用分面、合并或交互高亮,不依赖纯颜色区分。
  • 验证:灰度化图表后检查相邻类别是否仍可区分(明度阶梯是否拉开);灰度下粘连的相邻类别即是配色失败的实例。

延伸

  • 同组U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U11.04.3 线条过细在低对比度屏幕与投影下会消失 · U11.04.4 图中文字的最小字号需按最终呈现尺寸判定而非设计稿 · U11.04.5 可交互图元的尺寸下限还受触摸目标要求约束
  • 相邻U11.04.1 数据图元与背景的对比度需达到可辨阈值 · U1.05.4 相邻颜色会相互影响色相判断
  • 站内检索qualitative palette · color blindness · adjacent contrast

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U11.04.2