Text Spacing Bookmarklet Alternative — No Install, Faster Test
- Most WCAG text spacing bookmarklets are years out of date or broken by site CSP rules
- A dedicated checker tool tests all four 1.4.12 values without needing to install anything
- Paste CSS values, get pass/fail, copy auto-fix output — runs in your browser
Table of Contents
The classic workflow for testing WCAG 1.4.12 text spacing is a bookmarklet that injects a stylesheet forcing the minimum values. Then you scroll the page and look for layout breakage. It works — when the bookmarklet isn't broken by the site's Content Security Policy, or when you remember which of five competing bookmarklets to use. A dedicated tool sidesteps the install step and gives you direct pass/fail results.
Why text spacing bookmarklets keep breaking
Content Security Policy (CSP). Modern sites block inline scripts and external stylesheet injection. CSP headers say "only load scripts from this domain" — and the bookmarklet's inline JavaScript fails silently. No error, no effect.
Shadow DOM. Component libraries like LitElement, Stencil, and web components wrap content in Shadow DOM. CSS injected via bookmarklet does not pierce shadow boundaries. Half your page shows the spacing override, half stays unchanged.
Abandoned bookmarklets. The well-known WCAG spacing bookmarklets from 2018-2020 are still the most-linked but have not been updated. Modern sites break them in 30-40% of tests.
How a dedicated checker tool works differently
Instead of injecting into a live site, you paste your CSS values into the tool. The tool evaluates each value against WCAG thresholds and reports pass/fail per property.
Advantages: works regardless of CSP, works on Shadow DOM components (you are testing the declared values directly, not the rendered result), works on private/authenticated pages you cannot share with an external service, and produces an auto-fix output you can paste back into your stylesheet.
Disadvantage: you test CSS values, not the actual rendered layout. For layout-resilience testing (does the page break when you force 0.12em?), still use dev tools or a bookmarklet.
Sell Custom Apparel — We Handle Printing & Free ShippingWhen to use the checker vs. the bookmarklet
| Scenario | Best tool |
|---|---|
| Design phase — deciding what values to use | Checker tool |
| QA phase — testing a live page | Browser dev tools (override CSS directly) |
| Reviewing someone else's CSS | Checker tool |
| Finding clipped text on a live site | Dev tools with WCAG override |
| Batch testing many pages | Automated accessibility tools (axe, Lighthouse) |
| Quick spot-check at design time | Checker tool |
The dev tools alternative (works when bookmarklets fail)
Skip bookmarklets entirely. In Chrome/Firefox dev tools, open Sources, create a new snippet, paste:
const style = document.createElement('style');
style.textContent = `
* {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }
`;
document.head.appendChild(style);
Run the snippet on any page. CSP still blocks external injection, but dev tools run with elevated privileges that bypass most site policies. Much more reliable than bookmarklets.
What our checker tool does specifically
The spacing checker has four inputs (font-size, line-height, letter-spacing, word-spacing) and a paragraph margin field. Enter your values, see pass/fail for each against WCAG 1.4.12 thresholds, and click Auto-Fix to get output CSS that passes.
The auto-fix picks the smallest compliant value (1.5 line-height, 0.12em letter-spacing, 0.16em word-spacing, 2em paragraph) so you do not over-correct. You can then apply the output CSS and verify your layout holds.
Check WCAG 1.4.12 Without a Bookmarklet
Paste your CSS. Get instant pass/fail on all four spacing values. Auto-fix output ready to copy.
Open Free Spacing CheckerFrequently Asked Questions
Are the classic WCAG spacing bookmarklets safe to use?
Safe, yes — they are client-side JavaScript. Effective? Often no, due to modern CSP and Shadow DOM. A dedicated checker tool works regardless of either.
Why do some sites block bookmarklets?
Strict CSP headers block inline script injection. This is a security feature — it prevents XSS attacks — but it also blocks well-intentioned bookmarklets. The browser has no way to distinguish the two.
Can the checker tool test a URL directly?
Not currently — pasting CSS values is the current workflow. URL-based testing requires server-side processing which would compromise the "local-only, no upload" privacy model.
What if my site uses Tailwind — can I still use the checker?
Yes. Tailwind generates specific CSS values that you can find via browser dev tools. Inspect an element, copy its computed style values, paste into the checker.
