F5.12.3Contrast flattening设计

依赖阴影或渐变表达的层级在高对比模式下需要替代方案

别名: 高对比替代线索 · 阴影失效 · gradient hierarchy

概念解释

卡片叠成一叠,全靠投影看出谁在上;底部还有一层渐隐,暗示下面还有内容。高对比一开,软阴影被拿掉,渐变被收成两块平色,叠和「还有更多」一起消失。原先靠阴影或渐变讲的层级,在高对比里必须换成边框、间距、实线分割或明文结构,不能指望那层光还在。

深色主题改用表面加亮,是另一条路;高对比连不少中间明度也会砍,加亮梯子同样可能被踩平。

机制

高对比的工作方式是减少中间调。阴影是中间调,渐变是中间调的连续带。把它们删掉或量化成两端色,深度和「未完」这两种靠光的语言就没有载体。用户不是看不懂产品,是看不出层和截断。

替代必须是高对比下还活着的线索:闭合边框给出形状,间隙给出分离,实线给出裁切,文字给出「还有 N 项」。这些线索在普通主题里可能显得笨,但它们不是给普通主题用的。

边界

  • 本来就靠边框和间距分层的界面,高对比几乎不用另做层级方案。
  • 装饰性渐变(英雄区氛围)可以在高对比里直接删,不必找替代——它本来就没承担结构。
  • 若高对比主题仍保留很细的灰度阴影,低视力用户还是看不见;「我们留了阴影」不算替代。

怎么落地

  • 列出所有「关掉阴影 / 渐变图层就读不出结构」的组件:叠卡、底部渐隐列表、用内阴影表示凹陷的输入槽。
  • 为每一项指定高对比替代:叠卡改一圈边框加错位;列表改实线裁切或「还有 N 条」;输入槽改完整边框。
  • 不要把深色主题的表面加亮表复制进高对比当替代。
  • 验证办法:在高对比主题里把阴影和渐变强制关掉(它们本应已不在),看层顺序和「未完」是否仍能被说出;说不出就还没替代,只有缺失。

延伸

  • 同组F5.12.1 高对比模式服务于低视力用户,与深色模式目的不同 · F5.12.2 高对比模式通常要求更极端的前景背景明度差与更强的边框
  • 相邻F5.08 深色模式下的层级 · J2.15 深色与高对比模式的兼容
  • 站内检索contrast flattening · high contrast · elevation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F5.12.3