无障碍
系统以 WCAG 2.2 AA 为目标。下面这些规则已经做进 token 和组件里；每个组件额外做了什么，见各自的页面。
下面的表格是这个网站构建时从 token 文件算出来的，两种主题都有。正文需要 4.5:1；大字，以及控件的组成部分（比如状态圆点）需要 3:1。
浅色主题里有好几组不达标，表格里逐一标出：珊瑚色的链接、珊瑚色按钮上的白字、最浅的次要文字、卡片上的次要文字，以及青色、琥珀色和状态色的标记。深色主题几乎全部达标。浅色暂时按品牌交付包原样保留。在改之前：最浅的次要文字只用于提示和重复别处信息的标签；链接的意思要写在文字里，不要只靠颜色；每个标记旁边都配上文字。
奶油色底上的文字
Section titled “奶油色底上的文字”| 前景 | 背景 | 浅色 | 深色 |
|---|---|---|---|
--text-ink | --surface-canvas | 17.50:1AA | 17.01:1AA |
--text-body-strong | --surface-canvas | 14.58:1AA | 15.79:1AA |
--text-body | --surface-canvas | 10.35:1AA | 13.67:1AA |
--text-muted | --surface-canvas | 5.13:1AA | 6.62:1AA |
--text-muted-soft | --surface-canvas | 3.23:1仅大字 | 4.30:1仅大字 |
--text-link | --surface-canvas | 2.96:1不足 | 5.74:1AA |
--text-ink | --surface-card | 15.26:1AA | 14.88:1AA |
--text-body-strong | --surface-card | 12.71:1AA | 13.81:1AA |
--text-body | --surface-card | 9.02:1AA | 11.96:1AA |
--text-muted | --surface-card | 4.48:1仅大字 | 5.79:1AA |
--text-muted-soft | --surface-card | 2.82:1不足 | 3.76:1仅大字 |
--text-link | --surface-card | 2.58:1不足 | 5.02:1AA |
深色底上的文字
Section titled “深色底上的文字”| 前景 | 背景 | 浅色 | 深色 |
|---|---|---|---|
--text-on-dark | --surface-dark | 17.01:1AA | 13.78:1AA |
--text-on-dark-soft | --surface-dark | 6.62:1AA | 5.36:1AA |
--text-on-dark | --surface-dark-soft | 15.82:1AA | 12.65:1AA |
--text-on-dark-soft | --surface-dark-soft | 6.16:1AA | 4.92:1AA |
--text-on-dark | --surface-dark-elevated | 14.88:1AA | 11.42:1AA |
--text-on-dark-soft | --surface-dark-elevated | 5.79:1AA | 4.44:1仅大字 |
珊瑚色上的文字
Section titled “珊瑚色上的文字”| 前景 | 背景 | 浅色 | 深色 |
|---|---|---|---|
--color-on-primary | --color-primary | 3.12:1仅大字 | 3.12:1仅大字 |
--color-on-primary | --color-primary-active | 5.06:1AA | 5.06:1AA |
画布上的标记
Section titled “画布上的标记”状态圆点和点缀标记不是文字，标准是 3:1。浅色主题里大多数低于这条线，所以圆点不能只靠颜色表达意思：旁边要有看得见的文字。
| 前景 | 背景 | 浅色 | 深色 |
|---|---|---|---|
--accent-teal | --surface-canvas | 2.25:1不足 | 7.57:13:1 |
--accent-amber | --surface-canvas | 2.00:1不足 | 8.50:13:1 |
--status-success | --surface-canvas | 2.33:1不足 | 7.31:13:1 |
--status-warning | --surface-canvas | 2.25:1不足 | 7.54:13:1 |
--status-error | --surface-canvas | 4.59:13:1 | 3.70:13:1 |
每个链接和按钮在键盘聚焦时（:focus-visible）显示 2px 的珊瑚色外框，外移 2px，键盘用户随时知道自己在哪。输入框改为画自己的 --focus-ring 光圈。
屏幕窄于 768px 时，所有标了 data-ds-tap 的元素都放大到 --tap-min，也就是手指需要的 44px：列表里的行变高，图标按钮这类单元格长宽都变大。正文里的链接是唯一的例外，44px 的框会打乱它周围的行距。文件树也不标：文件夹能折叠，文件不能点，所有行都保持 28px，两者才对得齐。
系统设置了减少动效，或者网站自己的开关打开时，动效都缩短到 1ms，所以动效从不单独传达信息。见动效。
只要有原生元素，组件就用原生元素：真正的 <button>，能折叠的用 <details>，名称和值成对的用 <dl>，图片用 <figure> 和 <figcaption>。用颜色或圆点表示的状态，也会写成文字给读屏软件。组件里固定的文字（例如 “Copy code”“Required”）用英文。