Skip to content

Instantly share code, notes, and snippets.

@WestonThayer

WestonThayer/x-height-test.md

Created December 9, 2021 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WestonThayer/5e38244117338a7dfbd1f4eb5d507f75 to your computer and use it in GitHub Desktop.
Save WestonThayer/5e38244117338a7dfbd1f4eb5d507f75 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
x-height-test.md

x-height test while zooming

A basic algorithm to check if any given webpage has "accessible" text scaling, based on w3c/silver#506 (comment), 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment