Colour — semantic

34 tokens — 34 house.

Contrast

These tables say which text and edge colours may sit on which surface, measured against WCAG 2.1. Every foreground is paired with every surface, so a row does not mean the product uses that pairing. It means the pairing is allowed.

Read a cell as the contrast ratio followed by the use it is good for:

Most text in the product is smaller than the large-text threshold, so treat "large only" as a fail unless the text is a heading at that size. WCAG exempts placeholder text and disabled controls from these floors, so a muted colour that fails here can still be correct for those.

The non-text floor applies only to a boundary a reader needs in order to find a control, such as the border of an input. A divider or a card outline that only decorates is exempt, so an edge that fails here is not wrong by itself. It is wrong when it is the only thing showing where a control is.

The ratios are computed from the resolved token values on every build. They cover the semantic tokens only. A primitive colour used directly, such as a grey border, is not in these tables.

Text on surfaces, light

13 × 8 pairings, light theme. Floor 4.5:1 for normal text, 3:1 for large text. 16 fail even as large text.

Text on surfaces, dark

13 × 8 pairings, dark theme. Floor 4.5:1 for normal text, 3:1 for large text. 4 fail even as large text.

Edges on surfaces, light

6 × 8 pairings, light theme. Floor 3:1 for non-text. 48 fail.

Edges on surfaces, dark

6 × 8 pairings, dark theme. Floor 3:1 for non-text. 48 fail.

For a lint check

The same data is published as JSON at /data/contrast.json, with one entry per pairing and a pass or fail for each floor in both themes. A check in the product repository can fetch it and fail a pull request on a disallowed pairing.