Approved pairs
These are the foreground/background pairs the design uses, with their contrast. "Known issue" pairs fail WCAG AA today: don't use them in new work, and fixing them is the design system's first job.
| Sample | Pair | Used for | Contrast | WCAG AA |
|---|---|---|---|---|
| Aa | w-black on white | body text (text) | 15.91:1 min 4.5 | ✓ Pass |
| Aa | w-carbon on white | secondary headings (text) | 9.54:1 min 4.5 | ✓ Pass |
| Aa | w-gray on white | secondary text, captions (text) | 4.57:1 min 4.5 | ✓ Pass |
| Aa | w-gray on w-cultured | secondary text on light sections (text) | 4.27:1 min 4.5 | ⚠ Known issue |
| Aa | w-primary on white | links, outline buttons (text) | 5.11:1 min 4.5 | ✓ Pass |
| Aa | white on w-primary | primary button label (text) | 5.11:1 min 4.5 | ✓ Pass |
| Aa | w-primary on w-lavender | snackbar and alert text (text) | 4.44:1 min 4.5 | ⚠ Known issue |
| Aa | w-dark-primary on w-cultured | headings on light sections (text) | 10.78:1 min 4.5 | ✓ Pass |
| Aa | w-dark-primary on w-lavender | chips, selected items (text) | 10.04:1 min 4.5 | ✓ Pass |
| Aa | white on w-dark-primary | dark snackbar, dark sections (text) | 11.55:1 min 4.5 | ✓ Pass |
| Aa | w-danger on white | error icons and invalid-field borders (ui) | 3.30:1 min 3 | ✓ Pass |
| Aa | w-danger on white | form error messages (text) | 3.30:1 min 4.5 | ⚠ Known issue |
| Aa | white on w-danger | danger badges and buttons (text) | 3.30:1 min 4.5 | ⚠ Known issue |
| Aa | w-black on w-warning | warning badges (text) | 11.04:1 min 4.5 | ✓ Pass |
| Aa | w-sapphire on white | secondary links (text) | 6.82:1 min 4.5 | ✓ Pass |
| Aa | w-lightgray on white | input and checkbox borders (ui) | 1.68:1 min 3 | ⚠ Known issue |
| Aa | w-primary on white | focus ring (ui) | 5.11:1 min 3 | ✓ Pass |
Using color for meaning
✓ Do
Pair a status color with a label or an icon: "Prezzo ribassato" with an arrow, an error message under the field.
✕ Don't
Show a price drop, an error or availability with color alone. Some people can't see the difference.
Adding a color
A new color is a token (/ds-add). Every pair it's meant for goes in contrast-pairs.json, and the check fails if one is below 4.5:1 for text or 3:1 for large text and UI.