Design Audit

Audit any website's design: colors, typography, icons, grid, spacing, and WCAG accessibility. Exports HTML and SVG reports.

Design Audit is a professional tool for auditing the design of any website directly in your browser. ────────────────────────────── WHAT IT DOES ────────────────────────────── Open the side panel and browse. Design Audit inspects each page you visit and builds a consolidated picture of the design system actually in use — colors, type, icons, layout, spacing, and accessibility. Results accumulate across pages, so auditing a whole site is a matter of navigating it. When you are done, export a complete HTML report with seven tabs, or individual SVG sheets per category, ready to drop into Figma. ────────────────────────────── SIX AUDITS ────────────────────────────── COLORS Extracts every color in use — text, background, and border — and reconstructs the real palette. Shows usage frequency so you can tell the intentional palette from the accidents. TYPOGRAPHY Maps every font family, size, weight, line height, and letter spacing. Surfaces the type scale that exists in practice and the variants that drifted from it. ICONS Collects SVG icons, icon fonts, and image icons, with a rendered preview of each one. Detects mixed libraries and inconsistent sizing. GRID AND LAYOUT Analyzes the container system, grid patterns, flexbox usage, and the spacing scale behind them. Shows whether a real layout system is in place or whether it was improvised. SPACING Extracts the spacing scale in use across margins, paddings, and gaps. Measures adherence to a 4px grid and flags near-duplicate values that should be unified. ACCESSIBILITY (WCAG 2.1 AA) Runs an audit with axe-core, the same engine used by compliance teams. Groups findings by severity and category, links each one to the relevant WCAG success criterion with an explanation of what it means and why it matters, and highlights the offending elements directly on the page. ────────────────────────────── HOW IT WORKS ────────────────────────────── 1. Click the extension icon to open the side panel 2. Browse the site you want to audit — pages are collected automatically 3. Review the results in the panel as they accumulate 4. Export the consolidated HTML report or individual SVG sheets You can also refresh all audits manually at any time, and capture full-page or viewport screenshots. ────────────────────────────── PRIVACY ────────────────────────────── Audit data is stored locally in your browser and never leaves your device. All analysis runs locally on the page you are viewing. The extension does not collect browsing history, form contents, passwords, or personal data. Accounts are only created for PRO subscribers, and only an email address is stored. ────────────────────────────── EXPORTS ────────────────────────────── - Consolidated HTML report with seven tabs (Overview plus the six audits) - One SVG sheet per audit category, sized for Figma import - The HTML report is fully self-contained and opens offline, with no server required ────────────────────────────── FREE AND PRO ────────────────────────────── Free - All six audits on up to five pages per session - SVG export for every category PRO - Unlimited pages - Full accessibility audit with axe-core, WCAG categorization, and visual highlighting - Consolidated HTML report export PRO is available as a monthly subscription. ────────────────────────────── REQUIREMENTS ────────────────────────────── - Chrome 114 or later (required for the Side Panel API) - Works on any https:// site - Chrome internal pages (chrome://) cannot be analyzed, as required by the browser