Color & contrast
Every pair of colors in the theme, measured in light and dark. Lint fails the build if one drops below WCAG AA, so this table only ever shows passing values.
Rules
- Text needs 4.5:1 against its surface; large text (24px and up, or 19px bold) needs 3:1.
- Input borders and the focus ring need 3:1, so a field is visible before anyone types in it.
- A button's label is measured against its own fill, not the page: primary, secondary and accent all pass on their color.
- Text on color uses a tint of white (white/80), never a neutral grey: grey on blue turns muddy and loses contrast.
- Color never carries meaning alone: links are underlined, tags carry a word, errors carry a message.
Theme pairs
Computed from @ssntl/tokens at build time. The sample shows the real colors; the number is the contrast ratio.
| Use | Light | Dark | Minimum | Result |
|---|---|---|---|---|
Text on the pageforeground / background | 17.57 | 17.57 | 4.5 | AAA |
Text on a cardforeground / card | 19.67 | 16.14 | 4.5 | AAA |
Muted text on the pagemuted-foreground / background | 5.95 | 13.93 | 4.5 | AA |
Muted text on a cardmuted-foreground / card | 6.66 | 12.80 | 4.5 | AA |
Muted text on a muted cardmuted-foreground / muted | 5.95 | 12.04 | 4.5 | AA |
Neutral tagmuted-foreground / secondary | 5.43 | 10.69 | 4.5 | AA |
Primary buttonprimary-foreground / primary | 19.67 | 17.57 | 4.5 | AAA |
Secondary buttonsecondary-foreground / secondary | 16.05 | 13.47 | 4.5 | AAA |
Accent buttonwhite / blue-600 | 8.59 | 8.59 | 4.5 | AAA |
Supporting text on brandwhite/80 / blue-600 | 5.58 | 5.58 | 4.5 | AA |
Destructive textdestructive / card | 5.84 | 4.67 | 4.5 | AA |
Linkblue-600 · blue-300 / card | 8.59 | 9.48 | 4.5 | AAA |
Live taggreen-600 · green-400 / secondary | 4.59 | 8.64 | 4.5 | AA |
Input borderinput / background | 3.08 | 5.69 | 3.0 | Pass |
Focus ringring / background | 7.67 | 7.21 | 3.0 | Pass |