Skip to content

Stress test

Every artifact, under real-world stress

Of the 335 primitives, blocks and pages measured so far, 311 pass all 6 stress families and 24 fail at least one. 152 more are out of date because their source changed since they were measured. Every failure below is a real layout in a real browser, with a frame you can open.

This is a measurement, not a guarantee. A pass means the harness found no defect it knows how to detect. It does not replace testing with real translations, real assistive technology and your own data, and the list of what it cannot see is at the bottom of this page.

Six families, eleven conditions

A family passes only when every condition in it passes and at least one actually had something to act on. A block with no numbers cannot fail the huge-number test, and it is counted as not applicable rather than as a pass.

Pass and fail counts per stress family, over measured artifacts
FamilyPassFailConditions
Pseudo-localisationGerman runs about a third longer than English, and Japanese has no spaces to wrap on.3250German-length text · Japanese text
Text scale and reflowPeople set their text to 200% and zoom to 400%; content must neither clip nor scroll sideways.3350200% text size · 400% zoom reflow
Forced colorsWindows high-contrast throws away background colours, so anything drawn with one alone disappears.3350Forced colors
Reduced motionAn endless animation is the trigger the preference exists to remove.3350Reduced motion
RTL and darkRight-to-left readers and dark-theme users are both the majority somewhere.3350Right-to-left · Dark theme
Data extremesA 60-character surname, a row with nothing in it and a number with ten digits are all normal data.3150Very long names · Empty data · Huge numbers

What each condition does

German-length text0 failing
Every string is lengthened by the IBM expansion table (short strings double, long ones grow about 30%) and accented.
Japanese text0 failing
Words are replaced by CJK characters with no spaces, so lines wrap between any two characters.
200% text size0 failing · WCAG 1.4.4 Resize Text
Root text size doubled at a 640px window, which is how a 1280px window behaves with text set to 200%.
400% zoom reflow0 failing · WCAG 1.4.10 Reflow
A 320px-wide window: the page must not need to scroll sideways.
Forced colors0 failing · WCAG 1.4.11 Non-text Contrast
Windows high-contrast emulation. Shapes and control boundaries drawn with a background colour alone are lost.
Reduced motion0 failing · WCAG 2.3.3 Animation from Interactions
prefers-reduced-motion is on and the site’s own global override is off, so the artifact’s own handling is what runs.
Right-to-left0 failing
The document direction is rtl, as it is for Arabic, Hebrew, Persian and Urdu.
Dark theme0 failing · WCAG 1.4.3 Contrast (Minimum)
The dark palette, checked for text that no longer meets contrast.
Very long names0 failing
Short data strings gain a 36-character word with no break opportunity.
Empty data0 failing
Data text is blanked, as when a field is missing. Checked for headings and fields left with no accessible content.
Huge numbers0 failing
Every number gains six more digits with separators: $4,200 becomes $4,200,000,000.

What this cannot see

  • Real translations. German-length text is an allowance, not German; word order, hyphenation and kerning are untested.
  • Screen readers, switch access and voice control. Axe finds structural problems only.
  • Canvas and WebGL content, and any animation driven from JavaScript rather than CSS.
  • Empty data is checked for accessible names only; whether an empty card is a good design is a human judgement.
  • Changes outside an artifact’s own source, such as a design token, until the harness is re-run.

Reproduce it

npm run dev
npm run stress -- --level block --only hero-split --verbose
npm run stress -- --write