A11yKit: Client-Side WCAG 2.2 Auditing & Color Contrast Tools for Reka UI (Radix Vue) Devs

[gstar-byte]

Hi Reka UI (Radix Vue) team and community!

Reka UI provides an extraordinary headless, accessible foundation for Vue 3 developers — powering shadcn-vue and thousands of design systems with rock-solid keyboard navigation, focus management, and ARIA attributes out of the box. However, because Reka UI components are unstyled by design, ensuring visual accessibility (WCAG 2.2 AA/AAA color contrast ratios, focus visible contrast, touch target sizes, and color blindness legibility) falls squarely on the developer's styling implementation.

To help developers verify and audit these visual criteria effortlessly, we built A11yKit — a privacy-first web suite of 15+ browser-based accessibility utilities that run 100% client-side.

How A11yKit Complements Reka UI:

• 🎨 Contrast Calculators (WCAG 2.2 & APCA): Test your Vue/Tailwind color tokens for Dialog, Popover, Select, and Accordion triggers against required contrast thresholds.
• 🔍 Focus Visible & Keyboard Trap Tester: Ensure custom focus rings satisfy the mandatory 3:1 contrast against adjacent backgrounds and don't trap tab navigation.
• 📱 Touch Target Size Inspector: Verify buttons, disclosure toggles, and popover triggers satisfy WCAG 2.2 Criterion 2.5.8 (Target Size minimum 24×24px / 44×44px).
• 👁️ Color Vision Deficiency Simulator: Preview your interactive elements under 8 color blindness conditions to ensure status indicators don't rely solely on color.
• 🔒 Client-Side Privacy: Runs completely in your browser with zero network requests or tracking — completely safe for internal design systems and confidential UI tokens.

CLI & CI Support:

# Audit build outputs via npx
npx a11ykit-cli audit ./dist

# Or install via Homebrew
brew install gstar-byte/tap/a11ykit

• 🌐 Web Toolbox: https://a11ykit.site
• 🤖 GitHub Action: gstar-byte/a11ykit-action

Feedback, suggestions, and feature ideas from Reka UI users are very welcome!