Apply 200% text resizing, a 320 CSS pixel reflow viewport, or WCAG text spacing values to an HTML and CSS sample. Compare the original and test views to find fixed containers, controls, and responsive layouts that lose content. Your source is sanitized and rendered only inside an isolated preview with scripts disabled, and external images, fonts and stylesheets are never loaded.
Enter HTML or text to see the original and the resized or respaced result here.
Overlap, loss of functionality and real browser zoom still need a human check.
WCAG 1.4.4 AA
Doubles each element's computed font size at the selected viewport, leaving width, height and padding unchanged.
WCAG 1.4.10 AA
Uses a real 1280 CSS px layout viewport for the original and 320 CSS px for the test so responsive CSS actually reacts.
WCAG 1.4.12 AA
Forces line height 1.5, space after paragraphs 2, letter spacing 0.12 and word spacing 0.16 times the font size, never reducing a larger existing value.
WCAG 2.2 does not define one minimum font size that every web page must use. That does not make very small text automatically acceptable. The important test is whether people can enlarge or restyle text without losing content or functionality. A single font-size number cannot represent every viewport, typeface, language, and user setting.
This checker separates three conditions. 200% text doubles text size to stress fixed cards and controls. 320px reflow tests whether the layout adapts to a narrow viewport without page-level two-dimensional scrolling. Text spacing checks whether content survives user overrides for line, paragraph, letter, and word spacing.
WCAG 1.4.4 aims to keep content and functionality available when text is resized up to 200%. Browsers can support this through full-page zoom, text-only resizing, or user font preferences. The checker doubles each element's computed font size while leaving width, height, padding, and other properties unchanged. This is a conservative stress test for containers that do not grow with text.
The result is not a pixel-identical copy of full-page browser zoom. Test the implemented page at intermediate steps from 100% to 200% in the browsers your product supports. Pay particular attention to responsive breakpoints, sticky headers, dialogs, and form controls.
WCAG 1.4.10 expects vertically scrolling content to remain available at a width equivalent to 320 CSS pixels without requiring scrolling in two dimensions. A 320 CSS pixel viewport is equivalent to starting at 1280 CSS pixels and zooming to 400%.
The checker does not create this view by visually scaling an image four times. It uses a 1280px layout viewport for the original and a real 320px layout viewport for the test. Responsive media queries can therefore rearrange columns, navigation, and controls.
Some regions require a two-dimensional layout for their meaning or operation, including data tables, maps, and diagrams. These can be exceptions, but review whether scrolling is limited to the region and whether text inside it remains usable.
WCAG 1.4.12 describes four values that must be applicable together without loss of content or functionality: line height at least 1.5 times the font size, space after paragraphs at least 2 times, letter spacing at least 0.12 times, and word spacing at least 0.16 times.
These are not mandatory default typography values. The requirement is that a user can override author styles to these values without clipping text or losing controls. The checker leaves an existing value unchanged when it is already larger and modifies only the four relevant properties.
Some properties have different effects across languages and writing systems. Test realistic product strings, including mixed text, numbers, and longer localized labels.
Fixed width and height: a card with height 200px and overflow hidden may fit the default copy but clip enlarged or translated text. Prefer natural height, min-height, flexible spacing, and wrapping unless a fixed dimension is essential. A fixed width larger than 320px can create page-level horizontal overflow.
Blocked wrapping: white-space nowrap is useful for dates and code, but it can push long buttons or navigation beyond a narrow viewport. Decide whether one line is essential and allow the control to grow, wrap, or scroll only inside a justified region.
Absolute and fixed positioning: pixel-positioned text and icons can overlap when line count or font size changes. Fixed headers and bottom actions can also obscure content at high zoom. Prefer normal flow and flexible grid or flex sizing where possible.
Restricted line height and overflow: if font size grows while a fixed pixel line height remains small, glyphs and controls can overlap or clip. Test single-line fields and compact components with actual enlarged text.
Viewport-only font sizing: a size such as 2vw can respond to viewport changes in ways that prevent the expected enlargement across zoom and breakpoints. If you use clamp(), combine it with sensible relative minimums and verify the outcome.
No. Modern full-page browser zoom can enlarge text sized in px, so the claim that px equals failure is not accurate. A rem-based interface can still clip content when its container has a fixed height or hidden overflow. Conformance depends on the result after resizing, not the name of the CSS unit.
Relative units are still useful. rem can respond to a user's default font setting, and em can help spacing and control dimensions grow with local text. Use the CSS unit converter when changing values, then verify the final behavior in this checker and in a real browser.
Text embedded in an image cannot be restyled like HTML text and may lose clarity when enlarged. Except where a particular visual presentation is essential, use real text and CSS. This checker blocks external images and does not recognize text inside them, so inspect the design and implementation separately for images of text.
Page horizontal overflow means the document became wider than the test viewport. Possible clipping means a text container has more scroll content than its visible box while overflow is hidden or clipped. Horizontal scroll region identifies a component that scrolls separately and may be justified for a table or diagram.
Every candidate is marked as either already present in the original or introduced by the preset. Separating the two makes it easier to decide what the resize actually broke and what was already too tight.
No detected candidates does not confirm conformance. A person still needs to inspect overlap, available functionality, access to truncated text, and actual browser zoom. The preview narrows the search; it does not replace an accessibility evaluation.
Prepare representative short labels and the longest realistic content. Use 200% text to review cards, buttons, fields, tabs, and tooltips, then use 320px reflow to find page-level horizontal scrolling and fixed UI obstruction. Apply text spacing and inspect paragraphs, controls, and badges for clipping or overlap.
Review fixed dimensions, overflow, and nowrap on every detected element, then retest the deployed interface with actual browser zoom and keyboard operation. Use the HTML accessibility checker when structure or DOM order appears incorrect, and measure rendered colors separately with the contrast checker.
Only the text doubled, yet the content is nearly twice the height of the card. The save button and link at the bottom disappear, so the fixed height should become a min-height.
A single fixed width of 560px is the cause. The paragraphs and buttons inside overflow too, but only the outermost element is listed so there is one place to fix.
Font size never changed, yet wider spacing alone overflows the card. Resizing and spacing are separate conditions, which is why each has its own preset.
What it is, who it's for, how it works and why you'd use it.
A text scaling and spacing checker applies accessibility resize, reflow, and spacing conditions to HTML and CSS and compares the result with the original.
It is for HTML authors, front-end developers, designers, and QA testers reviewing 200% text resize, 320px reflow, and user spacing overrides.
It renders sanitized source in isolated previews, applies one WCAG-related preset, and measures horizontal overflow and likely clipped text.
It helps teams find fixed dimensions, blocked wrapping, and narrow controls that can hide content or functionality when text is enlarged or spaced out.