A2.15.3Low-contrast container cues invisible to low vision设计

低对比度的容器线索在低视力用户眼中可能完全不可见

别名: common region · 低视力 · contrast ratio

概念解释

共同区域是很强的分组线索:给一组元素套上同一个背景色块或者一圈边框,用户不需要比较间距、颜色,看边界就知道哪些内容属于同一个容器。为了配合整体视觉风格,这类容器线索经常被做得很淡——背景色只比页面底色深一点点,边框只用一条几乎看不见的细线。这种"淡"在对比敏感度正常的人眼里可能仍然勉强可辨,但对低视力(low vision)用户来说,容器和背景之间这一点点差异可能完全落在他们能分辨的对比度范围之外,容器看起来和周围背景连成一片,分组信息直接消失,而不是变得难以察觉。

机制

能不能看出两块颜色的边界,取决于两者之间的对比度是否超过观看者能分辨的最低门槛,这个门槛因人不同而不同——低视力人群的对比敏感度普遍低于常模,同样的颜色差异,在视觉功能正常的人眼里清晰可辨,在这个人群眼里可能压根感知不到差异的存在。容器线索一旦被设计得足够"低调"(这通常是为了追求视觉上的克制、不抢眼),它和页面背景之间的对比度就有很大概率跌破部分用户能感知的门槛,这时容器不是"看起来不明显",而是对这部分用户来说根本不存在。

边界

如果容器内的元素本身还带有其他分组线索(各自独立的标题、明显的间距差异),容器背景或边框只是锦上添花的强化,即使这条线索对低视力用户失效,分组信息仍然可以通过其他线索被感知到;但如果容器边界是唯一能标示"这几项属于同一个功能区"的线索——比如一个若隐若现的卡片背景是用户判断某组设置项彼此相关的唯一依据——对比度不足会让这部分用户完全无法感知到这个分组关系的存在。

怎么落地

  • 承载分组功能的容器背景或边框,对比度要按照能覆盖低视力人群的标准来选取,不能只用"设计稿里看着顺眼""不抢眼"作为唯一取舍依据;如果风格上确实需要克制的视觉表现,用其他不依赖对比度的线索(间距、标题、图标)来补足容器本该传达的分组信息。
  • 深色模式和浅色模式下的容器对比度需要分别检查,两套配色方案里同一个容器背景在不同底色上换算出来的实际对比度并不相同,其中一套达标不代表另一套也达标。
  • 验证办法:用对比度检测工具量出容器背景色/边框色与页面背景色之间的实际对比度数值,对照能覆盖低视力人群的最低对比度标准逐一核对;条件允许时,直接找低视力用户在真实设备、真实亮度环境下确认能否看出容器边界,工具测出的数值达标不能完全替代真实环境下的确认。

延伸

  • 同组A2.15.1 仅靠颜色实现的分组对色觉缺陷用户失效 · A2.15.2 仅靠间距实现的视觉分组不会传递给依赖顺序朗读的屏幕阅读器 · A2.15.4 关键分组关系需要同时有一条非视觉可感知的编码作为兜底 · A2.15.5 纯视觉分组在缩放或改变字号后可能因间距比例改变而失效
  • 相邻A2.07 共同区域 · J2.07 低视力与屏幕放大 · F5.12 高对比模式
  • 站内检索contrast ratio · low vision · common region accessibility

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.15.3