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.

Tab through elements to see the 2px focus ring. All variants use theme-responsive tokens — switch presets in the sidebar to see them adapt.

--focus-ring-width

2px

--focus-ring-offset

2px

--focus-ring-color

var(--ring)

Touch Targets

Minimum interactive target sizes for different contexts.

Minimum44px

44px

Apple HIG / WCAG 2.5.8 AAA

Comfortable48px

48px

Material Design 3

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.

--foreground: oklch(0 0 0)--muted-foreground: oklch(0.3 0 0)--border: oklch(0.5 0 0)+ editor, diff, skill 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 uses system color keywords.

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

@media (@media print)Universal

All colors resolve to black-on-white. Backgrounds transparent. Editor renders as plain text.

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

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

+−•

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

ARIA Patterns for States

Standardized ARIA attributes for loading, error, empty, and streaming states.

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."

Reading Measures

Maximum line lengths prevent eye strain and improve reading speed.

UI Text Maximum75ch

Skill results, descriptions, prose. ~12–15 words per line.

Screenplay Content60ch

Fixed by WGA standard. ~55–60 chars at 12pt Courier.