A11yKit: Privacy-First WCAG 2.2 Auditing & Color Contrast Tools for Payload CMS Admins

[gstar-byte]

Hi Payload community!

Payload has revolutionized headless CMS architecture by bringing native TypeScript, Next.js integration, and a modern Admin UI to developers. Because the Payload Admin Panel and custom admin components are used daily by diverse content teams and editors worldwide, ensuring these interfaces comply with international accessibility standards (such as the European Accessibility Act - EAA, US Section 508, and WCAG 2.2 AA/AAA) is essential for enterprise deployments.

To make visual and structural accessibility audits effortless, fast, and completely private, we created A11yKit — an open toolbox of 15+ client-side accessibility utilities that run 100% in your browser.

Practical Utilities for Payload Developers & Admins:

• 🎨 WCAG 2.2 & APCA Color Contrast Calculators: Verify custom admin themes, dark/light mode CSS tokens, document status badges, and table headers against stringent readability ratios.
• 👁️ Color Vision Deficiency Simulator: Inspect your custom fields, diff viewers, and workflow state indicators under 8 forms of color blindness to verify information is never conveyed by color alone.
• ⌨️ Keyboard Navigation & Modal Focus Trap Auditor: Check custom drawers, modal relationship pickers, and upload dialogs to ensure focus trapping and tab orders conform to WAI-ARIA standards.
• 📱 Touch Target Size Inspector: Verify mobile admin controls and collapsible action buttons meet the WCAG 2.2 minimum target sizes (24×24px / 44×44px).
• 🔒 100% Client-Side Privacy: Runs entirely within the browser via Web Workers. Proprietary schemas, editorial drafts, and database fields are never sent across the wire.

Integration into CI Pipelines:

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

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

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

We would love to get feedback from Payload creators on how these utilities can assist in crafting more accessible administrative experiences!