Tools // Contrast
Pair foreground & background tokens, verify WCAG.
The contrast workflow tests text against surfaces and freezes passing pairs before tokens ship — no guesswork, just measured ratios.
WCAG AA
WCAG AAA
Token-locked
Step 1 // Pairing
Test body, headline, and control text against surfaces.
Every text role — body copy, display headline, button label — is paired with its intended surface token and checked for minimum contrast ratio.
/* WCAG token audit */
:where(body) {
/* body text: must reach 4.5:1 (AA) */
color: var(--vl-text-main); /* against --vl-bg-main */
}
/* large text and headings: 3:1 (AA large) */
/* --vl-text-muted on --vl-bg-surface */
Velora token pairs are pre-validated with WCAG AA ratios. Run the contrast tool after any custom palette override to catch regressions early.
Step 2 // Documentation
Record passing pairs in the color spec.
Once a pair passes, it enters the color specification as an approved combination. Designers pull from approved pairs, not from raw swatches.
approved pair
--vl-ink-body / --vl-surface-base
ratio: 7.2 : 1 ✓ AAA
--vl-ink-heading / --vl-surface-panel
ratio: 5.1 : 1 ✓ AA
Guideline
Freeze before shipping.
Approved pairs become immutable once committed to the token foundation.
Step 3 // Regression
Re-check when themes or editorial modes change.
Theme switches (Noir ↔ Earth Tech) shift surface and ink values. Every approved pair must be re-verified after any token change.
Step 4 // Applied contrast
Pair, document, regress: the full contrast pipeline.
Test every text role against its surface, lock passing pairs into the color spec, and re-verify whenever themes shift.