Colour pairings

Every legal on-colour pairing with its contrast ratio. Generated from phase-2/kit/tokens.css (kit v3); the full page is docs › Foundations.

Contrast

Every pairing the admin uses, computed from the tokens. Text needs 4.5:1; controls, focus and chart marks need 3:1.

SamplePairingText / markOnRatioResult
AaBody text--foreground--background18.21:1Pass AA and AAA
AaQuiet text--muted-foreground--background6.83:1Pass AA
AaQuiet text on a well--muted-foreground--muted6.21:1Pass AA
AaPrimary button--primary-foreground--primary17.25:1Pass AA and AAA
AaPrimary button, hover--primary-foreground--primary-hover14.48:1Pass AA and AAA
AaSecondary button--secondary-foreground--secondary17.88:1Pass AA and AAA
AaSelected row, active filter--accent-foreground--accent15.27:1Pass AA and AAA
AaDanger button--destructive-foreground--destructive6.76:1Pass AA
AaDanger text--destructive--background6.76:1Pass AA
AaSuccess text--success--background7.03:1Pass AA and AAA
AaWarning text, STAGING badge--warning--background6.33:1Pass AA
AaInfo text--info--background7.24:1Pass AA and AAA
AaNeutral text--neutral--background6.48:1Pass AA
AaMenu text--sidebar-foreground--sidebar11.32:1Pass AA and AAA
AaActive menu item--sidebar-accent-foreground--sidebar-accent14.09:1Pass AA and AAA
AaActive rail and icon--sidebar-primary--sidebar8.50:1Pass 3:1
AaFocus ring--ring--background6.11:1Pass 3:1
AaControl edge--input--background3.13:1Pass 3:1
AaControl edge, hover--input-hover--background5.40:1Pass 3:1
AaSecondary button edge (text-labelled, exempt)--secondary-border--background1.70:1Exempt: text-labelled
AaHairline--border--background1.24:1Decorative, no minimum
AaChart series 1--chart-1--background5.77:1Pass 3:1
AaChart series 2--chart-2--background3.22:1Pass 3:1
AaChart series 3--chart-3--background3.41:1Pass 3:1
AaChart series 4--chart-4--background3.12:1Pass 3:1
AaChart series 5--chart-5--background3.85:1Pass 3:1
AaPrevious period--chart-muted--background3.46:1Pass 3:1
AaChip text on its 12% soft fill--draft--status-soft-alpha over --background = #E7EBF26.06:1Pass AA
AaChip text on its 12% soft fill--available--status-soft-alpha over --background = #E4ECE95.85:1Pass AA
AaChip text on its 12% soft fill--retired--status-soft-alpha over --background = #EBECEE5.48:1Pass AA
AaChip text on its 12% soft fill--warning--status-soft-alpha over --background = #F0EBE25.33:1Pass AA
AaChip text on its 12% soft fill--destructive--status-soft-alpha over --background = #F4E6E85.57:1Pass AA
AaChip text on its 12% soft fill--not-wired--status-soft-alpha over --background = #F0EBE25.33:1Pass AA