Accessibility

WCAG 2.2 compliance built into the token system. Every accessibility mode has purpose-built token overrides, not generic fallbacks.

Focus Ring

WCAG 2.4.13 Focus Appearance — 2px ring with 2px offset from element edge.

--focus-ring-width: 2px

--focus-ring-offset: 2px

--focus-ring-color: var(--ring)

Touch Targets

Minimum interactive target sizes for different contexts. Ensures touch-friendly interactions on all devices.

Minimum44px

44px

WCAG 2.5.8 Level AAA / Apple HIG

Comfortable48px

48px

Toolbar buttons, primary actions

Accessibility Media Queries

5 media queries with dedicated token overrides. Each targets a specific user need.

@media (prefers-reduced-motion: reduce)WCAG 2.3.1

All motion-duration-* tokens set to 0ms. Animations removed but content changes still occur.

--motion-duration-fast: 0ms--motion-duration-normal: 0ms--motion-duration-slow: 0ms--motion-duration-slower: 0ms

@media (prefers-contrast: more)WCAG 1.4.6

Foreground/background delta increased. Muted colors darkened. Borders strengthened. Applied to both light and dark modes.

--foreground: oklch(0 0 0)--muted-foreground: oklch(0.3 0 0)--border: oklch(0.5 0 0)+ editor, diff, skill, screenplay overrides

@media (prefers-reduced-transparency: reduce)CSS MQ5

Alpha-blended tokens replaced with solid equivalents. Prevents transparency-caused readability issues.

--editor-selection: solid--diff-*-bg: solid--skill-*: solid--note-color: solid

@media (forced-colors: active)Windows HCM

Minimal surgical overrides — system handles most colors. Diff indicators use system color keywords (LinkText, VisitedText, Highlight).

.diff-added: border-left: 3px solid LinkText.diff-removed: border-left: 3px solid VisitedText.diff-modified: border-left: 3px solid Highlight

@media (@media print)Universal

All colors resolve to black-on-white. Backgrounds transparent. Selection, cursors, and revision colors hidden. Editor renders as plain text.

--background: white--foreground: black--editor-*: B/W--revision-*: transparent

Reading Measures

Maximum line lengths prevent eye strain and improve reading speed.

UI Text Maximum75ch

Skill results, descriptions, prose. ~12\u201315 words per line.

Screenplay Content60ch

Fixed by WGA standard. ~55\u201360 chars at 12pt Courier.

Multi-Signal Encoding

Critical information is never conveyed by color alone. Diff indicators use color + border + text decoration for triple redundancy.

Signal 1: Color (hue)

Signal 2: Border (left accent)

Signal 3: Symbol

+\u2212\u2022

In forced-colors mode, system color keywords (LinkText, VisitedText, Highlight) replace token colors. The border width increases to 3px thick for visibility.

ARIA Patterns for States

Standardized ARIA attributes for loading, error, and empty states across all components.

State	ARIA	Behavior
Loading	aria-busy="true"	Screen reader announces "loading"; waits for busy=false
Error	role="alert" aria-live="assertive"	Interrupts current output to announce error
Empty	role="status" aria-live="polite"	Announces after current output finishes
AI Streaming	aria-busy="true" on container	Only state transitions announced (not tokens)
Complete	aria-live="polite"	"Skill complete. N suggestions ready for review."