A11yKit: Privacy-First WCAG 2.2 & Color Contrast Auditing Tools for Rich Text & Lexical Editors

[gstar-byte]

Hi Lexical community!

Building truly accessible rich text editors is notoriously challenging — from managing keyboard navigation in formatting toolbars to ensuring that selection highlights, syntax decorations, inline badges, and custom blocks satisfy WCAG 2.2 contrast ratios without hindering readability.

To make auditing visual accessibility and compliance fast and effortless, we built A11yKit — a collection of 15+ browser-based, privacy-first accessibility utilities that run 100% client-side with zero telemetry.

How A11yKit Complements Lexical Development:

• 🎨 WCAG 2.2 & APCA Contrast Calculators: Verify custom selection themes, toolbar button states (active/hover/disabled), inline callout boxes, and link styles against AA and AAA standards.
• 👁️ Color Vision Deficiency Simulator: Inspect your editor themes and decorated nodes under 8 distinct forms of color blindness to verify that formatting isn't conveyed through hue alone.
• ⌨️ Keyboard Navigation & Focus Trap Testing: Test toolbar dropdowns, link editors, and popover floating menus for focus-trap compliance.
• 📱 Touch Target Size Inspector: Verify formatting buttons and floating action handles satisfy WCAG 2.2 Criterion 2.5.8 (Target Size minimum 24×24px / 44×44px).
• 🔒 Absolute Privacy & Zero Data Exfiltration: Runs 100% locally in the browser via Web Workers; confidential text, editor states, and proprietary UI code never leave the local environment.

CLI & CI Integration:

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

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

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

We would love to hear feedback from Lexical developers on additional accessibility tools that could help when building extensible rich text experiences!