# Web Design Ruler

> Measure elements, identify fonts, and pick colors on any page. No data collection, no network requests, works offline. Open source, and the Firefox build now matches Chrome feature for feature.

Canonical page: [https://chrome-stats.com/d/web-design-ruler](https://chrome-stats.com/d/web-design-ruler)

## Overview

- **ID:** `web-design-ruler`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** LXB-Studio
- **Category:** web-development,photos-music-videos
- **Daily users:** 50
- **Weekly downloads:** 3
- **Version:** 2.2.0
- **Last updated:** 2026-07-17
- **First published:** 2025-06-10
- **Size:** 53 KB
- **Data as of:** 2026-09-09
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/web-design-ruler/)
- **Website:** [https://webdesignruler.com/](https://webdesignruler.com/)
- **Privacy policy:** [https://addons.mozilla.org/firefox/addon/web-design-ruler/privacy/](https://addons.mozilla.org/firefox/addon/web-design-ruler/privacy/)

## Description

<strong>Web Design Ruler is a small, honest toolkit for people who build websites.</strong> It answers the three questions you ask most while inspecting a page, how big is this, what font is that, and what color is this, without dev tools gymnastics and without phoning home.

<strong>Measure.</strong> Drag across the page to read width, height, diagonal, and area. Hold Shift to snap to a 10 px grid. Copy any value with one click.

<strong>Fonts.</strong> Hover any text to see its family, size, weight, style, line height, and color. The detector reports the font that actually rendered, not just the first name in the CSS stack. Save fonts to a history with live previews and copy any of them as CSS.

<strong>Colors.</strong> Pick from any element, including images and video frames, in HEX, RGB, and HSL. Right click while picking to grab the text color instead of the background. Recent colors are kept automatically, palettes can be saved and shared as JSON, and a built in WCAG checker shows AA and AAA contrast results as you pick. Copy All Colors harvests every color on a page in one right click and copies them as CSS variables.

<strong>Quick to reach.</strong> Toolbar popup, right click menu, or keyboard: Alt+Shift+R opens the popup, and Alt+Shift+P, F, and M jump straight to each tool. A toolbar badge shows when a tool is armed. Dark mode included, and the Firefox build ships with a Firefox themed starter palette.

<strong>Private by design.</strong> This add-on collects nothing and transmits nothing. No analytics, no ads, no accounts, and zero network calls in the code, which you can check yourself:
<ul><li><a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/520afcdb6111a222fd0753e0aa077204181623274f1a502e83c5dae2d9732c51/https%3A//webdesignruler.com/privacy.html" rel="nofollow">Privacy policy</a></li><li><a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/b83538612fd4d561acf1c1db50640bc62454201d4f89d8d82d17938a501469ad/https%3A//github.com/LXBStudioLLC/web-design-ruler" rel="nofollow">Source code, MIT licensed</a></li><li><a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/cdfb052bc815da0f71557dac5b5636a07d2d08ee8d7f12cc52067fd6c617b9da/https%3A//github.com/LXBStudioLLC/web-design-ruler/blob/main/AUDIT.md" rel="nofollow">Network call audit</a></li></ul>
The manifest formally declares that no data is collected, so Firefox shows you that guarantee at install time.

Questions or ideas? <a href="https://prod.outgoing.prod.webservices.mozgcp.net/v1/f7759dd37503d0c14b1ec1a73465d6178fac574c11aa7044af23ce82a3100d2f/https%3A//github.com/LXBStudioLLC/web-design-ruler/issues" rel="nofollow">Open an issue on GitHub</a> or write to <a href="/" rel="nofollow">LXBStudioLLC@gmail.com</a>.

## Rankings

- #16,088 — Overall
- #13 — design
- #33 — rule
- #107 — sign
- #204 — identify
- #225 — build

## Permissions and access

### Permissions

- `activeTab`
- `storage`
- `contextMenus`
- `scripting`
- `clipboardWrite`

### Host permissions

- `http://*/*`
- `https://*/*`

### Content script matches

- `*`

## Safety

- **Risk impact:** High risk impact
- **Risk likelihood:** Moderate risk likelihood

### Analysis details

- Allows access to all websites, posing a significant security risk as it can monitor and modify data from any visited site.
- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [Ruler Grid](https://chrome-stats.com/d/ruler-grid) — 39 users
- [Page Ruler](https://chrome-stats.com/d/pageruler) — 1 users
- [Web Wizard](https://chrome-stats.com/d/webwizard) — 10 users, 5.00 / 5
- [Pixel measurement](https://chrome-stats.com/d/pixel-measurement) — 47 users
- [Font Inspector & CSS Picker](https://chrome-stats.com/d/font-inspector-css-picker) — 1 users
- [Better Page Ruler](https://chrome-stats.com/d/better-page-ruler) — 34 users, 5.00 / 5
- [DesignPicker - Color Picker & Font Detector](https://chrome-stats.com/d/design-colorpicker-fontdetect) — 459 users, 5.00 / 5
- [Page Ruler Plus](https://chrome-stats.com/d/page-ruler-plus) — 13 users
- [Measure-it](https://chrome-stats.com/d/measure-it) — 20,395 users, 4.39 / 5
- [Pixel Measurement Tool](https://chrome-stats.com/d/pixel-measurement-tool) — 126 users
- [Element Size Ruler](https://chrome-stats.com/d/element-size-ruler) — 5 users
- [Page Ruler](https://chrome-stats.com/d/page-ruler) — 3,256 users, 4.33 / 5

---

Source: [Chrome-Stats](https://chrome-stats.com/d/web-design-ruler)