无障碍
底线,不是上限:
- 每个可交互目标至少 24×24px(WCAG 2.2 SC 2.5.8),模板里已经没有例外。宽度也要查,纯图标按钮是正方形的。视觉上刻意更小的——20px 的开关轨道、12px 的滑块圆钮、11px 的文字链接——模板的做法是保留视觉尺寸,用内边距把命中区撑到 24,再用等量负外边距还给版面,行高不变。它们引用的是同一个
--min-target,改一处,全部跟着走。 - 逐对验证对比度,永不假设。 换肤后把关键配对重算一遍,包括控件底色上小字这种最差情况。
text-tertiary按设计就在 AA 线下,所以它绝不承载取值、消息,或决策所依赖的标签。 - 键盘能到达鼠标能到达的一切,且顺序可见。对话框打开时锁住焦点,关闭时把焦点还给触发器。自造的列表框欠着原生
<select>白送的那份契约,见组件。 [hidden]需要恢复。 任何设了display: flex或grid的组件都会覆盖浏览器默认的[hidden] { display: none }。在基础样式里发[hidden] { display: none !important }——收起的面板漏出来,通常就是这个原因。- 含义永不只靠颜色、形状或动效。 红边框要配消息;spinner 要配文字;选中的缩略图要有描边,不只是底色。
关键配对实测
| 配对 | 实测 | 阈值 | |
|---|---|---|---|
text-primary 在白底 | 17.90:1 | 4.5:1 | 通过 |
text-primary 在 bg-subtlest | 17.46:1 | 4.5:1 | 通过 |
text-primary 在 bg-control | 15.56:1 | 4.5:1 | 通过 |
text-secondary 在白底 | 10.68:1 | 4.5:1 | 通过 |
text-secondary 在 bg-control | 9.28:1 | 4.5:1 | 通过 |
白字在 brand-default | 14.35:1 | 4.5:1 | 通过 |
白字在 bg-inverse(深色对话框头部) | 17.90:1 | 4.5:1 | 通过 |
stroke-surround(焦点环)在白底 | 4.76:1 | 3:1 | 通过 |
red-default 作为白底错误文字 | 4.36:1 | 4.5:1 | 临界 |
text-tertiary 在白底 | 3.60:1 | 4.5:1 | 已知例外 |
text-tertiary 在 bg-control | 3.13:1 | 4.5:1 | 已知例外 |
blue-default 作为链接与信息文字 | 3.79:1 | 4.5:1 | 已知例外 |
白字在 emphasize-default | 3.89:1 | 4.5:1 | 已知例外 |
text-disabled 在 brand-disabled | 1.57:1 | — | 本就不该被读 |
承载含义的那两档——text-primary 与 text-secondary——在系统里的每个表面上都过线。标为「已知例外」的四行是令牌导出给的原值,不是缺陷:下面会再列一遍并写清理由。换皮肤时把整张表重算一遍。
已知的、刻意接受的偏离
一份规范应该记下自己的债,而不是假装没有:
| 项 | 实测 | 阈值 | 理由 |
|---|---|---|---|
text-tertiary 作为说明文字 | 3.60:1 | 4.5:1(1.4.3) | 令牌导出给它的原值。因此三级文本只装看漏了也没关系的字——绝不装取值、消息,或决策所依赖的标签 |
blue-default 作为链接与信息文字 | 3.79:1 | 4.5:1(1.4.3) | 导出原值。链接保留下划线,颜色不是唯一信号 |
白字在 emphasize-default | 3.89:1 | 4.5:1(1.4.3) | 导出为平台红定的原值。它每屏最多出现一次 |
text-disabled 在 brand-disabled | 1.57:1 | — | 禁用控件本就刻意不可读;状态另由光标与 aria-disabled 承载 |
stroke-default 作为控件唯一边界 | 1.43:1 | 3:1(1.4.11) | 控件还靠底色与所处表面区分,边框不是唯一线索 |
| 白卡片上的灰底控件 | 1.15:1 | 3:1(1.4.11) | 整个面板建立在这种凹陷上;聚焦加 1px stroke-active 边框,标签也说明了它是字段 |
前四条来自令牌导出,按原值接受——尊重它们的方式是别把受影响的文字放到承重角色上,而不是去挪取值。后两条是这套视觉的来源:把边框加深到 3:1 会让每一条边都变重,而让控件静止时就有 3:1 的边界,等于把灰底取代掉的那个描边框又请回来。