Radii A11y

About

Linters catch missing alt text and wrong ARIA roles. They don't catch 3.9:1 color contrast, 28px touch targets, focus rings that exist but are invisible on your brand color, or animations that run on full motion for users who have prefers-reduced-motion set. Radii A11y catches the design-layer failures that automated tools miss — the issues that real users encounter and that appear in accessibility audits. Every finding includes the specific WCAG 2.2 success criterion it relates to, a pass/fail verdict, and the precise fix to apply.

What it does

• Checks color contrast and computes the actual ratio — then shows 3 hex alternatives that pass AA on the same background
• Audits focus ring visibility with a copy-paste :focus-visible CSS fix using Radii's accent token
• Measures touch target sizes and outputs the exact padding expansion to reach 44×44px without changing visual size
• Reviews animation safety with copy-paste @media (prefers-reduced-motion) override blocks for every flagged animation
• Tests text resize resilience (WCAG 1.4.4) and reflow at 400% zoom (WCAG 1.4.10)
• Every finding cites the exact WCAG 2.2 success criterion and level (AA/AAA) so you can prioritise by compliance target

Give it

• 1.A component file or CSS file to audit
• 2.Optional: specific colors (hex) to check contrast for
• 3.Optional: focus on a specific WCAG criterion (e.g. "1.4.11 non-text contrast")

Example output

**Accessibility audit — 8 failures, 3 warnings**

Color contrast:
  ✗ WCAG 1.4.3 — Body text #6b7280 on #f9fafb: 4.1:1 (need 4.5:1 for AA). Fix: use #5f6672 → 4.6:1
  ✗ WCAG 1.4.11 — Checkbox border #d1d5db on white: 1.9:1 (need 3:1 for UI components). Fix: use #9ca3af → 3.1:1
  ✓ WCAG 1.4.3 — Heading #111827 on white: 19.6:1 (AAA pass)

Focus:
  ✗ WCAG 2.4.11 — Button.jsx:15 — no :focus-visible style found. Add: focus-visible:ring-2 focus-visible:ring-[--color-accent-500]
  ⚠ WCAG 2.4.11 — Link.jsx:8 — focus ring uses outline: 1px (too thin). Minimum: 2px with 3:1 contrast

Touch targets:
  ✗ WCAG 2.5.8 — IconButton.jsx: 32×32px (minimum 24×24px, recommended 44×44px). Expand hit area with padding.

Motion:
  ✗ WCAG 2.3.3 — HeroSection.jsx: 3 animations without prefers-reduced-motion override

Reflow:
  ✓ WCAG 1.4.10 — Layout maintains single-column at 400% zoom

→ radii.cloud/terms/color-contrast, radii.cloud/terms/focus-visible, radii.cloud/terms/animation