Every colour role in light and dark, with the contrast each text pair reaches.
Each text colour on the surface it is made for, measured with the WCAG 2.2 formula. Body text needs 4.5:1, large text and icons 3:1.
| Text | On | Light | Dark |
|---|---|---|---|
| --foreground | --background | 18.28:1 | 19.63:1 |
| --card-foreground | --card | 19.21:1 | 18.74:1 |
| --popover-foreground | --popover | 19.21:1 | 16.89:1 |
| --primary-foreground | --primary | 4.89:1 | 4.89:1 |
| --secondary-foreground | --secondary | 17.04:1 | 16.89:1 |
| --muted-foreground | --muted | 4.84:1 | 6.36:1 |
| --accent-foreground | --accent | 16.48:1 | 16.96:1 |
| --sidebar-foreground | --sidebar | 18.71:1 | 19.63:1 |
| --sidebar-primary-foreground | --sidebar-primary | 4.89:1 | 4.89:1 |
| --sidebar-accent-foreground | --sidebar-accent | 16.48:1 | 16.96:1 |
| --success-foreground | --success | 1.73:1 | 1.00:1 |
| --warning-foreground | --warning | 2.48:1 | 1.00:1 |
| --info-foreground | --info | 1.00:1 | 1.27:1 |