A11yKit: 15 Client-Side Accessibility & WCAG 2.2 / APCA Contrast Tools for Tailwind CSS Developers

[gstar-byte]

Hi Tailwind CSS community! 👋

Designing accessible interfaces with Tailwind CSS often involves pairing custom utility colors (e.g. text-slate-500 against bg-slate-100 or custom brand tokens) while needing to ensure WCAG 2.2 AA/AAA and European Accessibility Act (EAA) compliance.

We built A11yKit (https://a11ykit.site) — 15 free, developer-first accessibility tools running 100% locally in the browser with zero server uploads.

Highlights for Tailwind developers:

• APCA & WCAG 2.2 Contrast Matrix: Test text and background utility color pairings across light and dark modes with real-time pass/fail indicators.
• Color Blindness Simulation (8 Models): Instantly test whether your Tailwind badge or alert states (red/green/yellow) remain distinguishable for color-deficient users.
• WCAG 2.2 Target Size Verifier: Validate touch target dimensions (such as h-6 w-6 vs h-11 w-11) to prevent interactive click target accessibility warnings.
• Zero Server Uploads: Full client-side execution via Web Workers. Proprietary themes and sensitive template code never leave the browser.
• CI/CD Integration: Seamlessly audit generated HTML in CI pipelines with pip install a11ykit-cli, npm install a11ykit-cli, or our GitHub Action.

Check out the full toolbox at https://a11ykit.site.

Feedback and ideas for Tailwind preset/config validator integrations are warmly welcome!