Accessibility

The system aims at WCAG 2.2 AA. The rules below are built into the tokens and components; each component’s page says what it does on top.

Contrast

The tables below are worked out from the token files when this site builds, in both themes. Body text needs 4.5:1; large text, and the parts of controls such as a status dot, need 3:1.

In the light theme several pairs fall short, and the tables mark each one: coral links, white text on the coral button, the softest muted text, muted text on the cream card, and the teal, amber and status marks. The dark theme passes almost everywhere. The light colours are kept as the brand handoff drew them, for now. Until they change, use the softest muted text only for hints and labels that repeat something said elsewhere, keep a link’s meaning in its words, not in its colour, and give every mark a word beside it.

Text on cream surfaces

Foreground	Background	Light	Dark
--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:1Large only	4.30:1Large only
--text-link	--surface-canvas	2.96:1Below	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:1Large only	5.79:1AA
--text-muted-soft	--surface-card	2.82:1Below	3.76:1Large only
--text-link	--surface-card	2.58:1Below	5.02:1AA

Text on dark surfaces

Foreground	Background	Light	Dark
--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:1Large only

Text on coral

Foreground	Background	Light	Dark
--color-on-primary	--color-primary	3.12:1Large only	3.12:1Large only
--color-on-primary	--color-primary-active	5.06:1AA	5.06:1AA

Marks on the canvas

Status dots and accent marks are not text, so the line for them is 3:1. In the light theme most of them fall below it, so a dot must not carry meaning by colour alone: put a visible word beside it.

Foreground	Background	Light	Dark
--accent-teal	--surface-canvas	2.25:1Below	7.57:13:1
--accent-amber	--surface-canvas	2.00:1Below	8.50:13:1
--status-success	--surface-canvas	2.33:1Below	7.31:13:1
--status-warning	--surface-canvas	2.25:1Below	7.54:13:1
--status-error	--surface-canvas	4.59:13:1	3.70:13:1

Focus

Every link and button shows a 2px coral outline, offset by 2px, when it has keyboard focus (:focus-visible), so a keyboard user can always see where they are. Inputs draw their own --focus-ring halo instead.

Touch targets

Below 768px, every element marked data-ds-tap grows to --tap-min, 44px, which a finger needs: rows in a list grow taller, and cells such as icon buttons grow in both directions. A link inside running text is the one exception, because a 44px box would break the line spacing around it. A file tree is not marked either: its folders fold but its files cannot be pressed, and every row stays 28px so the two line up.

Motion

Motion drops to 1ms under the system’s reduced-motion setting and under the site’s own switch, so it never carries information on its own. See Motion.

Structure

Components use native elements wherever one exists: a real <button>, <details> for anything that folds, <dl> for name and value pairs, <figure> with <figcaption>. A state shown by a colour or a dot is also written out for screen readers. The fixed words in components, such as “Copy code” and “Required”, are in English.