AccuRuler

Measure any element, on any background. Click-drag a ruler with live width, height and coordinates, always visible on dark pages.

AccuRuler recreates and improves on the classic page ruler. Click the toolbar button, then click-drag anywhere to draw a measuring box with live width, height, start and end labels. What makes it different: - Auto-contrast chrome — the border, crosshair and labels flip black or white to match the background under your pointer, so the ruler never disappears on a dark site. - Smart label placement — labels sit outside the box you're measuring and flip sides when there's no room, so they never cover the element you care about. - No popups, no ads — a single-purpose tool that gets out of your way. Tune it to your workflow: - Colors: line/crosshair color, fill color and opacity, label background. - Units: CSS pixels, physical pixels (× devicePixelRatio), millimetres or centimetres. - Keyboard: Esc cancels or clears; arrow keys nudge 1px (Shift = 10px). Private by design: AccuRuler collects nothing and makes no network requests. Settings stay in your browser.