Accessibility
Contrast, focus and motion are part of the brand, not an afterthought.
| Pairing | Ratio | Guidance |
|---|---|---|
| Primary Text on Canvas | ~15.9:1 | Pass — any size |
| Body Text on Canvas | ~11.6:1 | Pass — any size |
| Muted Text on Canvas | ~4.55:1 | Pass — normal text (AA) |
| Irozon Green on Canvas | ~2.2:1 | Large/bold text, icons & accents only — not body copy |
| Error on Canvas | ~2.8:1 | Pair with an icon or bold weight, not fine print |
| White text on Irozon Ink | ~15:1 | Pass — any size (AAA) |
-
Every interactive element uses a real
<button>/<a>and a visible:focus-visiblering — neveroutline:nonewithout a replacement. -
All motion respects
prefers-reduced-motion: reduce; see the Motion section toggle. - Never use Green alone to communicate status — Green and Lime are never the only signal for state (e.g. success/error); always pair with text or an icon so the message survives for color-blind readers too.
- Heading levels on any real page should descend in order (H1 → H2 → H3) — this reference follows that same rule throughout.
-
Images carry meaningful
alttext; purely decorative marks use emptyalt="". - Touch targets are at least 44×44px on any surface a finger might tap — the Signature CTA's 48px height and the icon chip's 48×48px footprint both clear this by design.