A11yKit: 15 Free, Zero-Upload Accessibility & WCAG 2.2 / APCA Contrast Tools for Chart.js Visualizations

[gstar-byte]

Hi Chart.js community! 👋

Chart.js powers clean, responsive data visualizations across the web. However, data charts are one of the most frequent sources of accessibility non-compliance: ensuring non-text graphical contrast (WCAG 2.2 Success Criterion 1.4.11 3:1 minimum for slice boundaries and grid lines), color blindness discernibility across chart series, and touch target sizes on interactive tooltips and legend controls.

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

How A11yKit helps Chart.js developers:

• Non-Text & APCA Graphical Contrast: Audit dataset fill colors and stroke outlines against varied canvas backgrounds and dark mode card surfaces.
• Color Blindness Simulator: Inspect multi-series bar and pie charts across 8 vision deficiency models (Deuteranopia, Protanopia, Tritanopia, etc.) to ensure data series don't rely solely on color hues.
• Target Size Verifier: Validate touch target dimensions on interactive legend chips, filter buttons, and drill-down controls (24x24px minimum for WCAG 2.2).
• Zero Server Uploads & Total Privacy: 100% client-side computation via Web Workers and WASM — safe for confidential business charts, internal analytics dashboards, and sensitive metrics.
• Automated CI/CD Checks: Easily test rendered HTML dashboard containers using pip install a11ykit-cli, npm install a11ykit-cli, or our official GitHub Action.

Explore all 15 free tools at https://a11ykit.site.

Feedback and ideas from the Chart.js community are warmly welcome!