F5.09.3Constrained color pairing设计
色板需内建对比度组合的合法性
别名: 合法配对 · on-colour · 色板约束
概念解释
有人把黄 200 的字放在黄 400 的底上,因为「都是黄,看起来很和谐」。这对组合在色板上不该存在。色板不只是一列可取的色,还要内建哪些前景可以站在哪些背景上:合法对写进角色(如「主色上的字」「容器上的字」),非法对根本没有名字可取。对比够不够看清,判据在无障碍一侧;这里说的是色板自己先不许拼出非法对。
机制
自由取色会把组合爆炸交给每一个屏幕。设计师在局部和谐的压力下,会选出同一色相里相邻的两档,或把浅字铺在浅品牌底上。色板若只提供色值、不提供配对,约束发生在评审,已经晚了。把「上的字 / 上的图标」做成与底绑定的角色,组合从 n×n 收到大约 n 条:每个容器只带自己的前景。这样非法对不是被警告,而是取不到。
合法性是色板结构,不是把阈值抄进色板注释。阈值怎么定、半透明怎么合成,由对比度判据负责;色板负责让默认路径走已经配对好的角色,让破例变成显式的、可审的例外。
边界
- 插画、数据可视化、用户生成皮肤会大量破例;这些通道不要假装走容器角色,另开不受配对表约束的出口,并在出口上标明「不保证正文可读」。
- 深色 / 浅色两套配对不能共用一张表,同一角色在两套主题里指向不同色值。
- 色板合法不等于现场合法:叠了照片、叠了半透明之后,合成色可能踢出合法区——那要在渲染后验,不能只验色板。
怎么落地
- 每个用作底的角色附带它的前景角色,组件只引用角色对,不引用两个任意 hex。
- 设计工具里把非法对从取色面板藏掉,或选中时直接无色可取。
- 破例必须写成具名例外(如「营销大数字」),并列出它不进入正文、不进入小号图标。
- 验证办法:抽一组组件,列出它们实际用到的前景 / 背景对,对照配对表;表上没有的对全部标红,优先改引用,而不是给那一对补一个新 token。