Accessibility
Contrast, focus, and motion guidelines for the FS&G design system.
Contrast — every running combination passes WCAG AA
The brand sticks to a small palette and only mixes pairs that clear AA at body sizes. Ratios are computed against the W3C relative-luminance formula. Anything below 4.5:1 (small text) or 3:1 (large text) is off-brand by definition.
| Pair | Sample | Role | Ratio | AA / AAA |
|---|---|---|---|---|
| Ink on white | The quick brown fox | body, headings | 16.3 : 1 | AA · AAA |
| Link on white | The quick brown fox | anchors, pull quote | 11.9 : 1 | AA · AAA |
| Text-mid on white | The quick brown fox | secondary body | 12.6 : 1 | AA · AAA |
| Text-light on white | The quick brown fox | captions | 5.7 : 1 | AA |
| Nav-text on charcoal | The quick brown fox | dark nav links | 13.3 : 1 | AA · AAA |
| Accent on white | The quick brown fox | .red utility, rare | 8.4 : 1 | AA · AAA |
| Sage on charcoal | The quick brown fox | footer pipes (decorative) | 5.3 : 1 | AA |
Focus — visible outline on every interactive element
A 2px var(--link) outline with 2px offset is the default for any keyboard-focused element. On the dark and accent buttons we invert to a white inset outline so it reads against the fill. Tab through the controls below to see it:
Motion — respects prefers-reduced-motion
The announcement marquee and the hero slider crossfade are the brand's only animated elements. When the OS reports prefers-reduced-motion: reduce, both are suppressed: the marquee falls back to a static centered headline and transitions snap to instant. The CSS rule lives at the bottom of global.css and is the right place to extend if new motion is ever added.
Semantics — what the layout assumes
- Every page has exactly one <h1> — the page title in DocsLayout. Don't add another inside content.
- <main id="main"> is the skip-link target. The .skip-link appears on focus at the top of the viewport.
- Sidebar groups are <section> blocks with an uppercase <h2> heading each — the visual eyebrow doubles as a landmark heading.
- The carousel arrows in the hero-slider demo are real <button>s with aria-label. If you ship a live slider, wire aria-roledescription="carousel" on the wrapper.
- Decorative imagery (e.g. the homepage card previews) uses alt="" or aria-hidden. The wordmark image in the topbar carries the full company name as alt text.
What not to do
- Don't remove the focus outline. If a control's outline collides with a hover state, change the offset — don't outline:none.
- Don't add a new looping animation. The announcement marquee is the one piece of animated typography; everything else holds still.
- Don't pair sage on white. #708776 on #fff is 3.0 : 1 — below AA for small text. Sage exists only against charcoal in the footer.
- Don't use the .red utility on a colored background. It's tuned for white only.