x-height-test.md

x-height test while zooming

A basic algorithm to check if any given webpage has "accessible" text scaling, based on https://github.com/w3c/silver/issues/506#issuecomment-817045025, which approximates x-height as ~50% of font-size (so the min and max x-height sizes from user research have been 2x'd):

• All text can reach a rendered font-size of least ~88 CSS px
• No text exceeds a rendered font-size of ~120 CSS px

By "rendered font-size", I mean the computed CSS font-size value multiplied by the current zoom level (100%, 150%, etc). So for example, assuming linear scaling, 17.6px would be the minimum acceptable size because browsers have a max zoom of 500% and 17.6 * 5 = 88.

1. Start at some "desktop" viewport, say 1280px wide, and 100% zoom
2. Build a hashmap pairing each text node with it's font-size @ 100%
3. For each increment of browser zoom from 100% to 500%...
   1. At the current zoom level, if a text node's font-size * zoom > prev_value, replace it in the hashmap, otherwise leave the old value (so we're storing the max)
4. Now inspect the hashmap. Fail the test if any text node's computed font-size failed to reach 88 or if it exceeded 120

This would definitively prove that a user can, at some zoom level, increase all type to a size they can read, without it growing too big. I feel like most fluid/responsive type designs would pass this, even though they have trouble with WCAG 2.1 today.