Style Inspector

Inspect any element's font, size, colors & WCAG contrast in plain words. Copy as CSS or Tailwind, scan the page palette.

Style Inspector shows you the type styles on any website in plain words — no DevTools, no digging through the Computed tab, no guessing what a value is "called." Click the toolbar icon to turn it on, then: • Hover any element to read its FONT family (plus the font actually RENDERED if the declared one isn't installed), SIZE, WEIGHT (e.g. "600 · Semibold"), LINE HEIGHT and LETTER SPACING, and its TEXT and BACKGROUND color as a swatch + HEX. • See the WCAG CONTRAST ratio between text and background, with AA / AAA pass-fail badges — instant accessibility checking. • Click to lock the element, then click any value to COPY it — or copy the whole element AS A CSS BLOCK or as TAILWIND CLASSES. • Walk the page with the ARROW KEYS: ↑ parent, ↓ child, ←/→ siblings. • Toggle px ⇄ rem. The panel appears next to what you inspect, and is draggable. • Press S to SCAN THE PAGE for its full color palette and type scale. • PAUSE it (don't turn it off) to click around the page, then RESUME with one click — the paused state follows you to other pages, so you never have to re-arm it from the toolbar. • Press Esc to unlock, or turn it off from the toolbar. Images, SVGs and videos show their relevant box styles instead (radius, border, shadow, opacity, object-fit) — never a bogus font value. Perfect for designers, front-end developers, and anyone doing QA who just wants to read a page's typography, colors and contrast without opening developer tools. Privacy: Style Inspector runs entirely in your browser. It does not collect, store, or transmit any data. It only reads the page you're on, and only when you click the icon. Values you copy go to your own clipboard and nowhere else.