Tactile Specs
Interactive design system inspector for accessible web components
What needed to be solved
Accessibility auditing tools are often buried inside heavy developer suite dashboards or produce overwhelming PDF dumps that developers ignore during daily UI development.
How I engineered the solution
Created an inline design overlay that highlights low-contrast elements and small touch targets directly on the DOM canvas with live WCAG math calculations.
Core components & data flow
- Chrome Manifest V3 isolated content script
- WCAG 2.1 Relative Luminance ratio calculation module ($L_1 + 0.05 / L_2 + 0.05$)
- Overlay DOM canvas drawer with non-intrusive shadow DOM boundaries
The bottleneck & breakthrough
Accurately computing computed background colors when elements inherit semi-transparent CSS alpha layers or absolute positioning overlays.
Engineering chronology & pivots
First built as a standard React overlay component injected into the page DOM tree. This resulted in CSS style bleed from host website stylesheets corrupting the inspector UI.
Re-architected the inspector widget inside an isolated Shadow DOM container with closed encapsulation, isolating extension CSS styles completely.
Created a custom tree-walking algorithm that resolves computed alpha channel composition across stacked DOM layers to accurately compute real contrast ratios.
What I Learned
Deep understanding of browser rendering layers, DOM tree traversal performance, and the mathematical definitions of relative luminance and color contrast ratios.
Measurable Result
Audits live DOM pages in real-time under 16ms per frame, making accessibility checks smooth during component development.
Need high-performance web systems built?
I craft custom full-stack web platforms, local-first architectures, and accessible design systems. Let's discuss your project.