Accessibility

Last updated: April 2026 · relay by Clover X Limited

Our commitment

relay is built for designers and developers — and that includes designers and developers who use assistive technology. We are committed to meeting WCAG 2.2 Level AA standards across the entire product.

Accessibility is not a feature we ship once. It is an ongoing practice woven into how we design, build, and test relay. Every component, every page, every interaction is held to the same standard: it must work for everyone.

We test with keyboard navigation, screen readers (VoiceOver, NVDA), automated tools (axe-core, eslint-plugin-jsx-a11y), and real users. When we find gaps, we fix them and document the fix below.

If you encounter an accessibility barrier in relay, please let us know at hello@relaylab.io. We take every report seriously and aim to respond within 5 business days.

Standards

WCAG 2.2 Level AA
Web Content Accessibility Guidelines — the global standard for web accessibility
In progress
Section 508
U.S. federal accessibility standard for electronic and information technology
In progress
EN 301 549
European accessibility standard for ICT products and services
Planned

Updates

A living log of accessibility improvements. Newest first.

Color & Contrast

Light-mode amber and textFaint contrast pass

  • Light-mode amber darkened from #aa580c to #9e4f0a
  • 4.95:1 on bgSurface2, 5.26:1 on bgBase
  • Light-mode textFaint darkened from #ad8f69 to #9a7f5a (3.39:1 on bgBase)
  • All 136 pairings now pass WCAG 2.2 AA with 0 failures
General

Font upgrade: Geist Sans replaces DM Sans

  • Replaced DM Sans with Geist Sans (by Vercel)
  • Taller x-height for better readability at 11–13px UI sizes
  • Sharper curves, better tabular number alignment
  • Variable font: single network request, smooth weight interpolation
Color & Contrast

WCAG 2.2 AA contrast audit completed

  • Audited 136 text/background pairings across dark and light themes
  • Bumped textMuted and textFaint to meet 4.5:1 and 3:1 contrast ratios
  • Created separate light-mode accent palettes for green, red, purple, indigo, orange, blue, teal
  • All accent colors now hit 4.5:1 on light surfaces
General

Minimum text size bumped to 10px

  • size.2xs increased from 9px to 10px
  • Affects monospace labels, identifiers, and timestamps
  • 9px was failing readability on mobile devices
Screen Reader

Landmark roles and heading hierarchy

  • AppShell topbar upgraded to semantic header element
  • Main content area has role=main
  • Sidebar quick links wrapped in nav element
  • Page title promoted to h1
  • Heading hierarchy verified: h1 → h2 → h3 with no skipped levels
Motion

prefers-reduced-motion support

  • Global CSS rule disables all animations and transitions
  • Respects prefers-reduced-motion: reduce from OS settings
  • Covers scroll-behavior, animation-duration, and transition-duration
Tooling

Accessibility lint tooling added

  • eslint-plugin-jsx-a11y with recommended rules enforced at lint time
  • @axe-core/react for runtime DOM auditing in development
  • Catches missing alt text, invalid ARIA, role mismatches before code ships
Keyboard

Keyboard navigation: Escape closes all dialogs

  • Escape key closes Settings, Profile, Issue Detail, and mobile sidebar
  • Issue detail skips Escape when editing title/description to avoid conflicts
  • All dialogs and slide-overs fully keyboard-dismissable
Screen Reader

aria-labels on all icon-only buttons

  • Close buttons, settings gear, sidebar collapse/expand
  • Org switcher, project toggles, profile buttons
  • All symbol-only icons marked aria-hidden
  • Covers dashboard, issues list, issue drawer, and settings