Text Spacing Checker – WCAG 1.4.12 Testing

WCAG 1.4.12 (Text Spacing) is a Level AA success criterion that requires content to remain readable and functional when users apply these minimum spacing values: Line height (line spacing): At least 1.5 times the font size Letter spacing (tracking): At least 0.12 times the font size Word spacing: At least 0.16 times the font size Paragraph spacing: At least 2 times the font size This ensures that users who need increased spacing (due to dyslexia, low vision, or other conditions) can customize text without content loss or overlap.

Increased text spacing significantly helps users with: Dyslexia: Wider spacing reduces visual crowding and letter confusion Low vision: More space between lines and words improves tracking Cognitive disabilities: Clearer separation aids comprehension Reading difficulties: Reduced visual stress and fatigue Aging: Natural decline in visual processing benefits from increased spacing Studies show that proper text spacing can improve reading speed and comprehension by up to 20% for affected users.

To ensure your website handles increased text spacing: Use relative units: Use em, rem, or % instead of px for spacing Avoid fixed heights: Let containers expand with content Use min-height: Instead of height for containers with text Flexible layouts: Use flexbox or grid instead of absolute positioning Test with user stylesheet: Apply WCAG spacing and verify nothing breaks Adequate whitespace: Design with generous spacing from the start Avoid overflow hidden: Don't hide overflowing text CSS to test: * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-bottom: 2em !important; }

Common issues that cause text spacing failures: Fixed height containers: Text overflows or gets cut off Absolute positioning: Text overlaps other content Pixel-based spacing: Doesn't scale with font size Overflow hidden: Content becomes invisible Tight layouts: Elements collide when spacing increases Fixed width with nowrap: Text can't expand Background images with text: Text moves out of readable area Test your layout by applying the WCAG spacing values and checking for content loss, overlap, or horizontal scrolling.

WCAG 1.4.12 applies to most text content, with some exceptions: Must comply: Body text and paragraphs Headings and titles Navigation links Button labels Form labels and inputs List items Exempt: Captions on images or videos Text in images (logos, screenshots) Text that's part of a logo or brand name The requirement is that when users override spacing, content must remain readable - you don't have to use these values by default.

Yes! There are several ways to test WCAG 1.4.12 on your live website: Browser bookmarklet: Create a bookmarklet that applies WCAG spacing via JavaScript Browser extension: Use extensions like "Text Spacing Editor" or "WCAG Text Spacing" Custom stylesheet: Apply user stylesheet in browser settings with WCAG spacing DevTools: Add spacing CSS in browser DevTools and inspect the page Automated testing: Use tools like axe DevTools or Pa11y to check compliance This tool helps you understand the requirements and test sample content before implementing on your site.