# Accessibility

## Purpose

Baseline requirements every project must meet.

## Decisions

- **Target level:** WCAG 2.2 level **AA** everywhere (text 4.5:1; large text, icons and component edges 3:1).
- **Focus** is always visible: a 2px lighter-violet ring (5.5:1 on the page) with a 2px gap, or for text fields a violet border.
- **Colour is never the only signal:** semantic colours sit on an icon and a border, and tags have a dot and a label.
- **Touch and click targets:** controls are 28, 34 and 40px, above the 24px minimum of WCAG 2.2 AA; on mobile each role moves up one size. There is no extra invisible tap area; the 40px (Large) size is used as is.
- **Motion:** every animation has a reduced-motion rule (movement removed, quick fades only), and nothing flashes. The spinner and shimmer loop but never faster than once a second.
- **Toasts** pause their timer on hover and keyboard focus.
- **Sound:** only errors and notifications make sounds, at a quiet level; they follow the device's mute and are never the only signal. Haptics follow the device setting.
- **Text size:** body text is 16px with a 24px line height; the line is capped at 720px. Text sizes use `rem`, so text follows the user's size setting; spacing stays in pixels.
- Soft white text on violet fills (buttons, selected items) is **5.5:1**; on the pressed violet it is 7.5:1.
- The disabled text colour `#4d4c4c` is 2.3:1 on the page, which is allowed because disabled controls are exempt.

### Contrast in dark mode

Contrast ratios use WCAG relative luminance. Tiers: page `#0e0d0c`, card `#171615`, accent `#272523`, pressed `#322f2c`.

| Colour | Page | Card | Accent | Pressed |
|---|---|---|---|---|
| Soft white text `#f2f2f2` | 17.3 | 16.1 | 13.6 | 11.9 |
| Grey text `#8c8c8c` | 5.8 | 5.4 | 4.5 | **4.0** (below 4.5) |
| Violet `#7520ff` (borders, icons) | 3.2 | **2.9** (below 3) | 2.5 | 2.2 |
| Lighter violet `#a169fa` (links, ring) | 5.5 | 5.1 | 4.3 | 3.8 |
| Red-pink `#ff0050` | 5.0 | 4.6 | **3.9** | **3.4** |
| Orange `#ff8000` | 7.7 | 7.2 | 6.1 | 5.3 |
| Emerald `#34d399` | 10.1 | 9.4 | 7.9 | 6.9 |
| Blue `#3b9eff` | 7.0 | 6.5 | 5.5 | 4.8 |

### Known exceptions

These fall below the AA numbers by design.

1. **Control borders** (text fields, checkboxes, switch tracks) stay as the 1px accent border, **1.2:1** against their surroundings (3:1 is the guideline). These controls are identified by position, labels and fill instead.
2. **The focused field's violet border** stays violet `#7520ff`, **2.9:1** against a card (3.2 against the page).
3. **Grey and red-pink text on hover and pressed fills** falls to **3.4 to 4.0:1** while the state lasts.
4. **The count badge** is white text on red-pink, **3.5:1**.
5. In light mode the semantic colours are only slightly darkened, so some icons and borders fall below 3:1 (see [Theming](theming.md)).