Accessibility

Farn targets WCAG 2.1 Level AA. The token system, focus styles, and motion controls are designed to make accessible output the default rather than an afterthought.

WCAG contrast matrix

Full contrast matrix for all semantic foreground/background token pairs. Ratings follow WCAG 2.1: AAA ≥ 7:1 · AA≥ 4.5:1 · AA Large ≥ 3:1 (≥ 24 px regular or ≥ 19 px bold) ·Fail < 3:1.

Light mode

Dark mode

† --color-text-tertiary is AA Large only in all light-mode contexts — never use it for body-size text; restrict to ≥ 24 px regular or ≥ 19 px bold.
‡ --color-accent-text (light mode) is designed for text on--color-accent button backgrounds — Fail against page surfaces is by design; both tokens resolve correctly in dark mode (17.51:1 AAA on --color-bg).
§ Dark mode: --color-accent-hover, --color-error,--color-warning, --color-success only meet AA Large on--color-bg; they fail on panel and inset surfaces. Always pair these with a text label or icon — never use colour alone to convey meaning.

Focus styles

Farn ships a global focus ring in tokens/base.css that applies to every focusable element without opt-in:

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: inherit;
}

:focus:not(:focus-visible) {
  outline: none;
}

border-radius: inherit means the ring hugs the shape of buttons, inputs, and cards rather than defaulting to a square. Component classes in farn-components.cssinherit this ring automatically — override only when a component needs a custom offset or colour (see --input-focus-shadow in the Forms component).

Reduced motion

tokens/base.css includes a blanket reduced-motion rule:

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

The 0.01ms value — rather than 0 — keeps animation events firing so JavaScript listeners do not stall waiting for an animationend event that never comes. Scroll-reveal elements (.scroll-reveal) additionally snap directly to their revealed state, bypassing the observer entirely.

Colour alone

Never use colour as the sole means of conveying information, indicating an action, prompting a response, or distinguishing a visual element (WCAG 1.4.1). Pair every colour-coded signal with at least one of: a text label, an icon, a pattern, or a position cue. Badge variants, for example, combine colour with a text label — the label alone would be sufficient; the colour reinforces but does not replace it.