03 / 20Design systems & a11y
A11y Inspector
Contrast checker, color-vision simulator and focus-order visualizer in one audit tool.
- Color science
- SVG filters
- Accessibility auditing
- Inclusive design
stirling.lab/a11y-inspector Live demo
Loading demo…
What to notice
- Simulates protanopia, deuteranopia, tritanopia and achromatopsia on a live UI
- WCAG AA/AAA contrast grading with automatic accessible color suggestions
- Visualizes tab order with numbered overlays and connecting lines
- Flags common issues: missing labels, tiny touch targets, low-contrast text
How it's built
- Color-blindness simulation uses established LMS transform matrices applied as SVG feColorMatrix filters.
- Suggestions binary-search lightness in OKLCH to keep hue while passing contrast.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.