Online Tool Store
· 4 min read
How to Generate a WCAG Text Spacing Bookmarklet
Heshan Fernando
Co-founder & COO
WCAG Success Criterion 1.4.12 requires that a website remain usable when a user applies specific minimum text spacing overrides — increased line height, letter spacing, word spacing, and paragraph spacing — without content being cut off, overlapping, or losing functionality. Testing this properly means actually applying those exact spacing values to a real page and checking what breaks, not just eyeballing whether the page’s default spacing looks reasonable.
Manually writing custom CSS with the right pixel and em values for each of the four spacing properties, then injecting it into a page just to test one criterion, is more setup than the actual check should require — which is exactly the gap a bookmarklet closes.
What testing WCAG 1.4.12 text spacing actually involves
The success criterion defines specific minimum values: line height at least 1.5 times the font size, paragraph spacing at least 2 times the font size, letter spacing at least 0.12 times the font size, and word spacing at least 0.16 times the font size. Testing compliance means applying overrides at least this generous to any page and checking that no content is clipped, overlapping, or otherwise loses functionality — a real, hands-on check rather than something you can verify just by reading the CSS.
Why people get stuck here
- Not knowing the exact minimum values off the top of their head. The four specific multipliers (1.5x line height, and so on) aren’t intuitive to remember, and getting them wrong means testing against a criterion that doesn’t actually match the real requirement.
- Manually writing and injecting test CSS for each page checked. Doing this by hand for every page under test is tedious enough that it discourages actually running the check as often as it should be run during development.
- Testing spacing changes without actually looking for real breakage. The point isn’t just applying the CSS — it’s specifically checking for clipped text, overlapping elements, or broken layout that the increased spacing causes.
- Assuming a page that looks fine by default automatically passes. A layout that looks clean at normal spacing settings can still break once WCAG’s specific spacing minimums are applied — the two aren’t the same check.
What a good text spacing bookmarklet generator looks like
Uses the exact WCAG 1.4.12 minimum values by default
Generating a bookmarklet pre-configured to the actual required multipliers (or beyond) means the test reflects the real success criterion, not a rough approximation.
Lets you configure spacing beyond the minimums too
Being able to test at values more generous than the strict minimum helps catch layout issues that might only appear with even more spacing, giving a bit more real-world margin.
Works as a simple drag-to-bookmarks-bar tool
A bookmarklet that applies instantly to whatever page you’re currently viewing removes the friction of writing and injecting custom CSS for every page you want to check.
Common mistakes to avoid
- Testing text spacing compliance only by reading the CSS instead of actually applying the override and visually checking for breakage.
- Using approximate or remembered spacing values instead of the actual WCAG 1.4.12 minimums, which can under- or over-test the real requirement.
- Checking only one page or component when spacing issues can appear inconsistently across different layouts within the same site.
- Treating a passing visual check as permanent — future content or layout changes can reintroduce spacing-related breakage that needs to be re-tested.
- Forgetting that 1.4.12 is about content not breaking under increased spacing, not about achieving a specific visual design — the test is functional, not aesthetic.
How to do it with Text Spacing Adjuster Bookmarklet
Online Tool Store’s Text Spacing Adjuster Bookmarklet generates your bookmarklet entirely in your browser.
- Open the Text Spacing Adjuster Bookmarklet tool.
- Configure line height, letter spacing, word spacing, and paragraph spacing to WCAG 1.4.12 minimums or beyond.
- Drag the generated bookmarklet to your bookmarks bar.
- Click it on any page you’re testing to instantly apply the spacing override and check for broken layout.
Frequently asked questions
What are the exact WCAG 1.4.12 minimum spacing values?
Line height (line spacing) at least 1.5 times the font size, spacing following paragraphs at least 2 times the font size, letter spacing at least 0.12 times the font size, and word spacing at least 0.16 times the font size.
What counts as a failure of this criterion?
Content that gets clipped, overlaps other content, or loses functionality (like a button becoming unusable) once the required spacing overrides are applied counts as a failure — the layout needs to remain fully usable, not just visually different.
Does passing this check mean my site is fully accessible?
No — 1.4.12 is one specific success criterion within the broader WCAG standard, addressing text spacing flexibility specifically for readers who need increased spacing. It doesn’t cover other accessibility requirements like color contrast, keyboard navigation, or screen reader compatibility, which need to be tested separately.
Final thought
WCAG 1.4.12 is a functional test, not a visual preference — apply the actual required spacing minimums to a real page and look for breakage, rather than assuming a clean-looking layout automatically passes.