Design Analyzer v3.11.63

Rule-based scoring against WCAG, Material Design, and typography best practices. Checks computed styles — no AI, just evidence and math.

Screenshots Pixel Verify (slower)

Enter a URL to analyze — works on phone, no console needed.

How it works

The page is fetched via a CORS proxy and rendered in a sandboxed iframe with its CSS. JavaScript is off by default — for JS-heavy sites (React, Vue, Angular), enable it below. Storage, cookies, and other sensitive APIs are automatically isolated. Pages behind login, localhost, or sites that block proxies/framing need the Console Snippet tab instead.

Running locally? clone the repo, cd into it and start node server.js — then analyze http://localhost pages.

Viewport:

Enable JavaScript (for React, Vue, etc.)

Deep scan (multi-viewport + dark mode) Crawl site (analyze multiple pages)

Skip elements from analysis (optional)

Elements you skip (and everything inside them) won't be scored.
Useful for decorative UI mockups, screenshots, or third-party widgets.

Or type a CSS selector:

Open the page you want to analyze in any browser (works with localhost, staging, pages behind login)

Press F12 to open DevTools → Console tab Tip: undock DevTools (⋮ → undock into separate window) so the page viewport stays at its real size.

Copy the snippet below, paste into the console, press Enter. The extracted JSON is copied to your clipboard automatically. With screenshots enabled, it captures the page and includes pixel data for contrast verification.

Come back here and paste (Ctrl+V) into the box below, then click Analyze. Fallback: if auto-copy failed, type copy(window.__milgData_json) in the console.

Extraction Snippet

Crawl site Embed screenshot lib

JavaScript

Loading...

Paste extracted JSON

Load a saved analysis

Drop a .milg or .json file here or click to browse.

Audience:

Audience Profiles — Evidence-Based Thresholds

Each profile adjusts scoring thresholds based on published accessibility research. Switching re-scores instantly.

	Contrast	Font min	Touch	Key change
General	4.5:1	16px	24/44px	WCAG AA baseline
WCAG AAA	7:1	16px	24/44px	Enhanced contrast
Elderly	7:1	18px	48px	12px spacing, max 7 nav, no thin fonts, reduced motion
Low Vision	7:1	18px	44px	12px spacing, 32px icons, bg image warnings
Motor	4.5:1	16px	48px	12px spacing, focus indicator checks
Color Vision	4.5:1	16px	24/44px	CVD palette simulation, red-green reliance
Children	4.5:1	18px	48px	16px spacing, grade 5 reading, max 5 nav
Cognitive	4.5:1	16px	24/44px	Grade 8 reading, max 5 nav, reduced motion

Sources

Contrast 4.5:1 / 7:1 — WCAG 2.2 §1.4.3 (AA) and §1.4.6 (AAA)
Touch target 44px — WCAG 2.2 §2.5.8; 48dp from Material Design 3
Click target 24px — WCAG 2.2 §2.5.8 minimum for non-inline targets
16px body text — Browser default; NNGroup research on minimum legibility
18px for elderly — W3C WAI Older Users and WCAG large text definition (18pt = 24px, 14pt bold = 18.5px)
48px targets for motor/elderly — Material Design 3 (48dp); Apple HIG (44pt)
12px target spacing — WCAG 2.2 §2.5.8 spacing exception; Motor impairment research via COGA Task Force
Line height 1.4–1.6 — WCAG 2.2 §1.4.12 (1.5× minimum); Butterick's Practical Typography
No thin fonts for elderly — W3C WAI Developing for Older Users: avoid font-weight below 400
CVD palette simulation — Machado et al. 2009; WCAG 2.2 §1.4.1
Reading level Grade 5/8 — WCAG 2.2 §3.1.5; Flesch-Kincaid / Coleman-Liau index
Max 5 nav items — Cowan (2001): working memory 4±1; NNGroup children UX
Children touch targets — NNGroup Physical Development: 48px min, 76px ideal for ages 4-8
Cognitive/COGA — W3C Making Content Usable: short sentences, consistent nav, icon+text

Export & Share

Click finding	Jump to that issue in the report
Shift + click	Copy element debug info (bbox, selector, coords) to clipboard
Right-click	Cycle debug layers: none → text mask → pixel boundary zones
Double-click	Step zoom level (25% → 200%, then reset)
Drag	Pan the image
Hover finding	Tooltip with severity, details, and sample colors
Hover pixel rect	Live FG/BG color pair under cursor with contrast ratio
Overlapping items	Click shows a picker to select which element
Esc	Close the viewer

Category card	Click score card to scroll to that category's findings
Show on screenshot	Opens viewer zoomed to that specific element
Exclusion tags	Toggle tags to exclude patterns (cookie banners, etc.), then re-score
Audience selector	Switch profile (WCAG AA, AAA, Elderly, etc.) — re-scores instantly

Screenshots	Capture page screenshots for visual verification and the screenshot viewer
Pixel Verify	Sample actual pixel colors from screenshots to verify CSS contrast ratios
Deep Scan	Analyze at multiple viewport widths (Desktop, Tablet, Phone)
Crawl	Follow links and analyze multiple pages from the same site
Enable JavaScript	Run page JS in sandbox (for SPAs). The Console Snippet is safer.

P10 ratio	10th percentile of all FG/BG sample pairs — used for pass/fail (robust against anti-aliasing)
Hidden failures	CSS says pass but pixels say fail — real background differs (gradient, image, overlay)
False positives	CSS says fail but pixels show the actual background provides enough contrast
Edge contrast	Checks if element backgrounds are distinct from their parent (buttons on same-color bg)

Export .milg	Compressed full dump — screenshots, masks, pixel data, debug overlays. Re-importable with all features intact.
Export .md	Full Markdown report with embedded screenshot images
Copy for LLM	Copies filtered findings to clipboard — no images, only actionable issues. Respects the severity filter.
Load Saved	Import tab — drop or browse for a `.milg` or `.json` file to restore a previous analysis

Design Analyzer v3.11.63

Extraction Snippet

Paste extracted JSON

Audience Profiles — Evidence-Based Thresholds

Help & Tips

Screenshot Viewer

Report

Analysis Options

Pixel Verification

Data & Export