Color contrast guide
How Meridian ensures every pixel meets WCAG 2.1 AA contrast ratios without sacrificing the violet aesthetic.
The rule
All text must maintain a minimum contrast ratio of 4.5:1 against its background. Large text (18px+ bold or 24px+ regular) can drop to 3:1. UI components and graphical objects need 3:1 against adjacent colors.
Our palette
Violet #8B5CF6 on dark #0A0612
Ratio 6.2:1 — PASS
Pink #F472B6 on dark #0A0612
Ratio 5.8:1 — PASS
White on violet #8B5CF6
Ratio 4.6:1 — PASS
Gray #9CA3AF on dark #0A0612
Ratio 5.3:1 — PASS
What we avoid
- Violet text on pink backgrounds (ratio ~2.1:1)
- Gray #6B7280 on dark #0A0612 (ratio ~3.9:1 for body text)
- White text on pink #F472B6 (ratio ~3.4:1)
- Any gradient that drops below threshold at midpoint
Quick check
Use Chrome DevTools → Rendering → “Show rendering” to overlay contrast ratios during development. Our CI pipeline runs axe-core on every deploy to catch regressions before they ship.