Chapter 3 — Reference · Section 11
Contrast Reference
Every verified color pair in the SOLIDA design system. All ratios computed against the WCAG 2.1 algorithm. AAA = 7:1+ (all text), AA = 4.5:1+ (normal text) or 3:1+ (large text / UI components).
Verified Pairs
Aa
on-primaryonbg-primary#ffffffon #1b5e80
AAA9.1:1
Aa
on-primary-containeronbg-primary-container#001e30on #c8d5e2
AAA12.4:1
Aa
on-secondaryonbg-secondary#ffffffon #8e3924
AAA8.4:1
Aa
on-secondary-containeronbg-secondary-container#3b0700on #dfd0ca
AAA11:1
Aa
on-tertiaryonbg-tertiary#ffffffon #316858
AAA7.8:1
Aa
on-tertiary-containeronbg-tertiary-container#00201aon #c4cecc
AAA11.8:1
Aa
on-surfaceonbg-surface#1c1b1fon #f0efef
AAA16.1:1
Aa
on-surface-variantonbg-surface#49454eon #f0efef
AA7.2:1
Aa
on-surfaceonbg-surface-container#1c1b1fon #ebebec
AAA14.9:1
Aa
on-surfaceonbg-surface-container-low#1c1b1fon #e6e5e6
AAA13.8:1
Forbidden Combinations
These pairings fail WCAG and are locked-pair violations. Never use them.
Aa
on-primaryonbg-primary-containeron-primary is paired with primary, not primary-container
FAIL
1.4:1
Aa
on-primary-containeronbg-primaryon-primary-container is paired with primary-container only
FAIL
1.2:1
Aa
primaryonbg-primary-containerNever use brand color as text on container bg
FAIL
1.9:1
Aa
primary-containeronbg-surfaceContainer tokens are backgrounds only — never text colors
FAIL
1.4:1
WCAG Thresholds
| Criterion | Minimum | Applies to |
|---|---|---|
| WCAG 1.4.3 — Normal text | 4.5:1 (AA) | Text below 18px, or below 14px bold |
| WCAG 1.4.3 — Large text | 3:1 (AA) | Text 18px+ or 14px+ bold |
| WCAG 1.4.6 — Enhanced | 7:1 (AAA) | All text — SOLIDA targets this |
| WCAG 1.4.11 — Non-text | 3:1 | UI components, icons, focus rings |