QA overlays

In-browser QA overlays: measure, guides, grids, accessibility.

Stop juggling DevTools panels. QA overlays lays a front-end developer's and designer's inspection toolkit directly over any web page — so you can measure spacing, align elements, check layout grids, and audit accessibility right where you're working. Four tools, one keystroke away: • Measure — Pixel rulers down both edges. Hover any element for its exact size, padding, and margin. Alt+drag to measure any distance. Click to pin an element and get a full box-model readout — padding, margin, border-radius, border, and font — plus live spacing to any other element you hover. • Guides — Drag alignment guides out from the edges. They snap to element edges and stay put per site, so your setup is waiting for you on your next visit. • Grids — Overlay column and baseline grids to check rhythm and alignment. 12-column, 16-column, and baseline presets are built in, or dial in your own columns, gutter, margin, and max-width. • Accessibility — Run a full axe-core audit in one click and see every violation ranked by impact; click a finding to flash the element on the page. Switch on the contrast checker and hover any text to read its WCAG AA/AAA color-contrast ratio instantly — no scan required.