1px solid red
The ultimate toolbox for layout debugging, typography check, and OG verification.
1px solid red is a Safari extension for web developers and designers. It answers two questions before you ship: do the sizes and gaps add up, and does the text read well? It works on iPhone and iPad, where Safari’s Web Inspector needs a Mac and a cable, and on the Mac.
Measure
- Gaps without clicking. Move into the empty space between two elements and it is measured. By touch, tap it.
- Distances. Lock an element, then point at another to see what lies between them.
- Guides. They scroll with the page and are saved for each website. They need a keyboard.
- Your units. Switch between px, rem, em and ch.
Text
- Real characters per line. Counted from the lines Safari actually draws: median, shortest and longest.
- Line height and font. Line height as a ratio to the font size, and the font actually in use.
- Contrast, twice. WCAG 2 and APCA side by side, with the APCA threshold for the real size and weight. APCA is a draft, so it is a second opinion.
- The whole page. The overview lists every block of text, worst first.
Findings you can pass on
Copy any finding as Markdown, or take a snapshot with the measurements drawn in.
Planned: OG verification
The next step after version 1.0: how a link will look when shared, checked on the page itself, so it works on localhost and behind a login too.
Nothing leaves your device
No account, no server, no analytics. The extension makes no network requests. Privacy policy
Where to get it
In development, coming to the App Store. In English, Czech, Slovak and German.