Skip to content

Foundations

Colour

Contrast targets the palette hits

The four pairings that have to clear WCAG, and what ratio each one actually hits. Anything not listed here either isn't shipped as a foreground/background pairing or stays at decorative weight (icons, ambient texture).

  • Body type on paper: --fg-primary on --bg-paper ≈ 14.6:1 (AAA).
  • Peak on paper: --accent-link on --bg-paper ≈ 4.7:1 (AA normal text).
  • White on navy: #FFFFFF on --u-navy-800 ≈ 16:1 (AAA).
  • Focus ring: 2px white gap + 2px peak (--shadow-focus) - visible on every surface.
Colour · Usage