What is inspect mode?
Inspect mode lets you click on any element on the page to see its visual properties — dimensions, spacing, typography, colors, and accessibility details. It works in website projects and web app projects, and is available to guests on shared links too.
How to use it
Press I on your keyboard to enter inspect mode (or select it from the mode switcher). Hover over the page to highlight elements, then click to open the inspect sidebar.
Press I again or Escape to exit inspect mode.
What it shows
Layout
- Width and height
- Padding (top, right, bottom, left)
- Margin (top, right, bottom, left)
- Border radius (each corner)
Typography
- Font family
- Font size
- Font weight
- Line height
- Letter spacing
- Text color
Colors
- Background color
- Text color
- Border color and width (per side)
Accessibility
The Accessibility tab shows:
- Contrast ratio — the contrast between the element's text and background colors, shown as a ratio (e.g. 4.5:1).
- AA / AAA status — whether the contrast meets WCAG accessibility standards for normal and large text.
- Font size check — flags text below 12px as potentially hard to read.
This is useful for catching accessibility issues during design review without needing a separate tool.
