Accessibility.

WCAG 2.2 AA as the floor, AAA on body text where achievable. Focus rings are 2px Werklist Blue with 2px offset. Every transition respects prefers-reduced-motion globally.

13.1

Target

WCAG 2.2 · AA

AA is the minimum. AAA applies to body prose. The placeholder gray #A0A0A8 is borderline AA and must only be used for placeholder input text. never body.

13.2

Contrast

Full matrix lives on /color. Highlights below.

#1863DC#FFFFFF4.89:1AA body · AAA large

#FFFFFF#03058514.7:1AAA all sizes

#52525B#FFFFFF8.17:1AAA all sizes

#A0A0A8#FFFFFF3.05:1Placeholder only

#B91C3A#FFFFFF6.02:1AAA all sizes

13.3

Focus ring

Focus ring specification

/* Light surfaces */
outline: 2px solid #1863DC;
outline-offset: 2px;
border-radius: inherit;

/* Dark surfaces */
outline: 2px solid #FFFFFF;
outline-offset: 2px;

Never remove focus styling without replacing it with an equivalent affordance. Applied via :focus-visible globally in globals.css.

13.4

Keyboard

All interactive elements are tab-navigable.
Skip-link at top of every page jumps to main content.
Modal and dropdown trap focus. Escape closes.
Enter / Space activate buttons. Enter submits forms.

13.5

Screen readers

Every form input has a visible <label> + aria-describedby for helper / error text.
Icon-only buttons have aria-label.
Live regions (role="status" / role="alert") for async feedback.
Landmark roles on every page: header, nav, main, footer.

13.6

Reduced motion

Applied globally. not per-component.

globals.css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}