# Accessibility

A neon-on-black system is high risk for contrast and motion issues. Nocturne bakes in
some safety, but you own the last mile. Target **WCAG 2.1 AA**.

## Color contrast

Contrast ratios against `--noct-bg` (`#07070b`):

| Foreground | Ratio vs bg | Verdict |
| --- | --- | --- |
| `--noct-text` `#f4f4f8` | ~18.5:1 | Pass, body text |
| `--noct-text-muted` `#c4c4d4` | ~11.8:1 | Pass, labels |
| `--noct-text-dim` `#8a8aa0` | ~5.6:1 | Pass for normal text, tight, use for metadata |
| `--noct-primary` yellow `#fcee0a` | ~15:1 | Pass, safe as text |
| `--noct-info` cyan `#00f0ff` | ~12:1 | Pass, safe as text |
| `--noct-success` green `#00ff9d` | ~13:1 | Pass, safe as text |
| `--noct-accent-orange` `#ff8a00` | ~7:1 | Pass |
| `--noct-danger` magenta `#ff003c` | ~4.2:1 | Borderline. Large text (≥ 18.66px bold / 24px) or non-text only |
| `--noct-accent-violet` `#7a3cff` | ~3:1 | Fails as body text. Use for borders, fills-with-dark-text, large text only |

Rules of thumb:
- Body text: `--noct-text` / `--noct-text-muted` only.
- Magenta and violet: never small body copy. Fine as borders, rails, large headings,
  or as a fill with black text (as buttons do).
- Never rely on color alone. Pair status color with a label (`[ERROR]`, an icon, a
  word). The Alert and TaskChip components already do this.

## Focus

- Every interactive element must show a visible focus state. The base layer applies a
  2px yellow `:focus-visible` outline; inputs add a yellow ring + glow.
- Do not remove outlines without replacing them with an equally visible indicator.

## Motion

- Signature animations (pulse dot, skeleton sweep, tab glow) all honor
  `prefers-reduced-motion: reduce`. The token layer also zeroes transition durations
  under reduced motion.
- Never add essential meaning that only exists in motion.

## Structure & semantics

- Use real elements: `<button>` for actions, `<a>` for navigation, `<details>` for
  the Disclosure, `role="tablist"` / `role="tab"` / `aria-selected` for Tabs.
- Progress uses `role="progressbar"` with `aria-valuenow/min/max`.
- Inputs must have an associated `<label>` (`Field`/`Label` handle this).
- Icons that carry no text are `aria-hidden`; icon-only buttons need an `aria-label`.

## Testing checklist

- [ ] Tab through the whole view, focus is always visible and logically ordered.
- [ ] Every status color is backed by text or an icon.
- [ ] No body text uses magenta or violet.
- [ ] Reduced-motion mode removes shimmer, pulse and long transitions.
- [ ] Automated pass (axe / Lighthouse) is clean.