A11yKit: Client-Side WCAG 2.2 Auditing & Color Contrast Tools for React Native Paper Devs

[gstar-byte]

Hi React Native Paper community!

React Native Paper provides an exceptional Material Design 3 foundation for cross-platform and mobile applications, including solid accessibility support out of the box. However, when tailoring custom theme tokens (MD3Colors), dark elevation palettes, and responsive layouts for React Native Web and mobile apps, verifying that every color combination and touch target strictly meets WCAG 2.2 AA/AAA guidelines and international accessibility laws (such as EAA and ADA) remains an important production task.

To help developers and designers audit these visual criteria without installing heavy dependencies or compromising privacy, we created A11yKit — an open web suite of 15+ browser-based accessibility utilities.

Practical Utilities for React Native Paper Developers:

• 🎨 WCAG 2.2 & APCA Color Contrast Calculators: Verify custom theme.colors (primary, onPrimary, surfaceVariant, error) against high-contrast and readability ratios.
• 📱 Touch Target Size Inspector: Verify mobile Buttons, FABs, IconButtons, and Chip targets conform to WCAG 2.2 minimum requirements (24×24px / 44×44px hit-slop).
• 👁️ Color Blindness Simulator: Inspect your theme palettes and status indicators under 8 color vision deficiency types.
• ⌨️ Focus & Keyboard Navigation Auditor: Check modal dialogs and drawer menus for focus confinement when running React Native for Web.
• 🔒 100% Client-Side Privacy: Runs completely locally in your browser with zero network requests or analytics tracking — private app assets and internal tokens remain completely secure.

CLI & CI Integration:

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

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

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

We would love to hear thoughts and suggestions from the React Native Paper community on making accessibility auditing even simpler for cross-platform developers!