07 // Accessibility & Print

Contrast,
Focus & Print.

Contrast

WCAG 2.1 AA contrast spot check.

4.5:1 required for normal text. 3:1 for large text (18pt+ or 14pt bold). Colors marked "Bg only" must not be used as text color or icon fill on white.

Sample
Text / Dark bg
#F8FAFC on #0A0C10
18.5:1 — Pass AAA
Sample
Text / Light bg
#0F172A on #F8FAFC
19.4:1 — Pass AAA
Sample
Muted / Light
#334155 on #F8FAFC
8.6:1 — Pass AA
Sample
Muted / Dark
#94A3B8 on #0A0C10
7.2:1 — Pass AA
Sample
Magenta / White
#fff on #FF007F
3.5:1 — Bg only
Sample
Blue / White
#fff on #007FFF
3.0:1 — Bg only
Sample
Mustard / White
#fff on #CA8A04
2.7:1 — Bg only
Sample
Emerald / White
#fff on #059669
4.6:1 — Marginal
Sample
Lime / Black
#000 on #A3E635
10.3:1 — Pass AAA

Interactive requirements

  • →Focus-visible: 2px solid #3B82F6, 3px offset — all interactive elements
  • →Theme toggle: aria-label updates dynamically ("Switch to light/dark mode"), aria-pressed reflects state
  • →Decorative SVGs: aria-hidden="true" and focusable="false"
  • →Color swatches: role="img" with aria-label naming color and hex value
  • →Reduced motion: @media (prefers-reduced-motion: reduce) disables all transitions and animations
  • →Heading hierarchy: h1 → h2 → h3 — never skip levels
  • →Minimum text size: 11px — 7–9px fails all WCAG thresholds
  • →Landmark roles: nav, main, footer on all pages

Print rules

  • →@media print block overrides all CSS variables to white background / #0F172A text
  • →Nav, theme toggle, hero CTAs, logo glow hidden via display:none
  • →Gradient hero text: -webkit-text-fill-color forced to #0F172A (browsers strip gradient clip on print)
  • →Color swatches print as solid fills — strengthen borders to 1px solid #94A3B8
  • →page-break-inside: avoid on all cards, swatches, color groups
  • →No CMYK or Pantone values — this palette is screen-first. Request a print conversion profile from the brand team for physical production.