Accessibility

The accessibility work is measured, not claimed — three instruments in this repository produce the numbers, they run in CI, and their results are published on every component’s own page rather than in one report nobody reads.

42

contrast pairs rendered, over 97 stories

113/113

focus indicators at or above floor

31/31

widgets holding their ARIA pattern

The floors

4.5 body text under 24px and its hover / focus / active states (stricter than WCAG) · 3.0 large text 24px and over · 3.0 non-text that carries meaning · 3.0 disabled, as an aim only.

The three instruments

What it proves	Run it	Writes
Every text/surface pair the tokens promise, and every pair the browser actually paints	npm run contrast · npm run contrast:render	artifacts/contrast-matrix.md · artifacts/a11y/contrast-render.json
Every focus indicator, measured against what those pixels showed before focus	npm run focus	artifacts/focus-ring.md · artifacts/a11y/focus-ring.json
Tab order, no keyboard trap, one tab stop per composite, and every ARIA pattern	npm run keyboard	artifacts/keyboard.md · artifacts/a11y/keyboard.json

The keyboard pass draws an honest line: @pepperui/css ships no JavaScript, so what it verifies is the markup the package documents — order over 344 tab stops, Shift+Tab as the exact reverse, no positive tabindex. What a stylesheet cannot promise — that ArrowRight moves to the next tab — is stated as a contract per primitive, from the ARIA Authoring Practices, with a column for what the browser already gives.

The focus ring

A solid 2 px line in border/focus, with a soft halo outside it, against a floor of 3.0. One place defines it, --pui-ring in base.css, so every control agrees; this site’s own chrome draws the same colour and width as an outline, because an outline cannot be clipped by a scrolling rail.

What is open

0 pairs sit below their floor and none of them fails the build: each is a value that is in production, and moving it is a design decision rather than a fix. The full list, worst shortfall first with every number and the ramp step that would clear it, is at the end of artifacts/contrast-matrix.md.

#	The pair

The largest gap is the field outline: border/default is the boundary of every form control and reads 1.41 against the 3.0 that WCAG 1.4.11 asks — while its hover value conforms at 3.89, so today the boundary is only conformant while the pointer is on it.