Text Spacing Compliance Toggle

WHAT IT DOES

Text Spacing Compliance Toggle is a browser extension that applies text spacing overrides to meet WCAG success criterion 1.4.12 (Text Spacing). It applies line-height, letter-spacing, word-spacing, and margin-bottom overrides to all text content on the page. The tool includes WCAG-recommended minimum values: line-height of at least 1.5, letter-spacing of at least 0.12em, word-spacing of at least 0.16em, and margin-bottom of at least 2em. Users can toggle the feature on or off and customize each spacing value using sliders. The setting is saved per website. The tool is ideal for accessibility testers, developers, designers, and users who need to ensure text spacing meets accessibility standards or who prefer increased text spacing for readability.

WHERE IT RUNS

Text Spacing Compliance Toggle runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting CSS to override text spacing properties. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the text spacing overrides. Use the sliders to adjust line height (1.0-3.0), letter spacing (0-0.5em), word spacing (0-0.5em), and margin bottom (0-5em). The WCAG recommended minimums are line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, and margin-bottom 2em. Click "Reset to WCAG Defaults" to restore the recommended values. Click the "Reapply" button to manually refresh the styles. All settings are saved per website, so your preferences persist across visits.

REAL MECHANISM — WHY THIS WORKS

Most text spacing tools rely on browser settings or user style sheets that may not apply to all elements. Text Spacing Compliance Toggle uses a high-specificity CSS injection approach that applies spacing overrides to all text-containing elements (p, li, div, article, section, h1-h6, etc.) using !important rules. The tool injects a style element with CSS rules that set line-height, letter-spacing, word-spacing, and margin-bottom using em units, which scale relative to the font size of each element. The selectors target a comprehensive list of text containers to ensure consistent application across different page structures. The sliders allow users to adjust each value independently, with the current values displayed in real time. The WCAG recommended minimums are set as defaults, but users can adjust them to meet specific needs. The tool saves the current values in GM_setValue and reapplies them on page load. This approach ensures comprehensive, consistent, and fully private text spacing control without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, and all spacing values—are saved per domain for a seamless experience.

PLEASE NOTE

Text Spacing Compliance Toggle requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies CSS !important rules, which may conflict with page styles that also use !important. The spacing values are applied to all text containers, which may affect layout on pages with complex designs. The WCAG recommended minimums are a guideline; users may adjust values to suit their needs. All settings are stored locally in your browser using GM_setValue. No page content, spacing data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only modifies CSS at your request.