WCAG 2.2 AA compliance audit and remediation

kert commented

2026-03-21 18:19:56 +00:00

Owner

Scope

Audit all user-facing CSS and HTML for WCAG 2.2 Level AA compliance.

Checklist:

Colour contrast (1.4.3, 1.4.6)

All body text: ≥ 4.5:1 contrast ratio against background
Large text (≥18pt or 14pt bold): ≥ 3:1
UI components and graphical objects (1.4.11): ≥ 3:1
Audit current palette: #a0b0c8 on #0a1628 = ~5.2:1 ✓, but #5a7090 on #0a1628 = ~2.8:1 ✗
Fix --tb-steel (#5a7090) — too low contrast for text on navy

Focus indicators (2.4.7, 2.4.11, 2.4.12)

All interactive elements have visible focus ring
Focus ring contrast ≥ 3:1 against adjacent colours
Focus not obscured by other content (2.4.11 — new in 2.2)

Motion and animation (2.3.3)

Add @media (prefers-reduced-motion: reduce) to disable CSS transforms/transitions
Check styles/move.svg for animation accessibility

Text spacing (1.4.12)

Content remains readable with line-height 1.5×, paragraph spacing 2×, letter-spacing 0.12em

Target size (2.5.8 — new in 2.2)

All click/tap targets ≥ 24×24 CSS px (Level AA)
Audit small tag buttons in library page, sidebar nav items

Services to audit:

Docusaurus docs site
Marimo notebooks
Gitea (limited — upstream controls)
Dashboard landing page
Library page (/library)

Tools:

axe-core or Lighthouse for automated checking
Manual keyboard navigation testing
Colour contrast checker for palette values

## Scope Audit all user-facing CSS and HTML for WCAG 2.2 Level AA compliance. ### Checklist: **Colour contrast (1.4.3, 1.4.6)** - [ ] All body text: ≥ 4.5:1 contrast ratio against background - [ ] Large text (≥18pt or 14pt bold): ≥ 3:1 - [ ] UI components and graphical objects (1.4.11): ≥ 3:1 - [ ] Audit current palette: `#a0b0c8` on `#0a1628` = ~5.2:1 ✓, but `#5a7090` on `#0a1628` = ~2.8:1 ✗ - [ ] Fix `--tb-steel` (#5a7090) — too low contrast for text on navy **Focus indicators (2.4.7, 2.4.11, 2.4.12)** - [ ] All interactive elements have visible focus ring - [ ] Focus ring contrast ≥ 3:1 against adjacent colours - [ ] Focus not obscured by other content (2.4.11 — new in 2.2) **Motion and animation (2.3.3)** - [ ] Add `@media (prefers-reduced-motion: reduce)` to disable CSS transforms/transitions - [ ] Check `styles/move.svg` for animation accessibility **Text spacing (1.4.12)** - [ ] Content remains readable with line-height 1.5×, paragraph spacing 2×, letter-spacing 0.12em **Target size (2.5.8 — new in 2.2)** - [ ] All click/tap targets ≥ 24×24 CSS px (Level AA) - [ ] Audit small tag buttons in library page, sidebar nav items ### Services to audit: - Docusaurus docs site - Marimo notebooks - Gitea (limited — upstream controls) - Dashboard landing page - Library page (/library) ### Tools: - axe-core or Lighthouse for automated checking - Manual keyboard navigation testing - Colour contrast checker for palette values