Too small, and grey

Someone read the site on a phone and sent three messages about it. It looks good on a computer. A lot of the text seems small and hard to read. Especially when the text is grey.

That is better feedback than it looks, because it separates two complaints that have different answers. One of them is a matter of taste. The other is a measurable failure against a published standard, and it had been shipping for weeks.

The grey was not a matter of taste

The drawing system this site is built on has four inks and no colour: black, an off-white called print, a mid grey called ash, and a dark grey called deep. Emphasis is supposed to come from scale, never from hue. That rule is good. What it did not say was which of those inks are allowed to carry words.

Deep is #454542. Against the black ground, that is a contrast ratio of 2.18:1.

The threshold for body text under WCAG 2.0 Level AA — the standard AODA points at — is 4.5:1. So deep was not marginal. It was less than half of the minimum, and it was setting real text: the column headers on the register table, every study code and result count in the plate archive, the codes inside the nodes of the wiring diagram, the search placeholder, the labels in the title block at the foot of every page.

The sister site was worse. altineris.com uses the same idea with a different palette, and its equivalent ink, #4A5478, measures 2.66:1 and was carrying type in eighty-seven places — breadcrumbs, figure captions, capability tables, and whole paragraphs of explanatory text.

Both are now retired to drawing duty: rules, marks, the scrollbar thumb. A dark ground turns out to carry exactly two text inks above 4.5:1, so the third tier of emphasis is gone and what used to be dimmer is now simply smaller. Which is what the system said it believed in the first place.

The size was not covered by the standard, and was still real

WCAG sets no minimum font size. The 8px labels were, strictly, compliant. They were also the thing a reader on a phone actually complained about, and "it passes" is not an answer to "I cannot read it."

So the floors moved: labels from 8–9px to 9–10px, body from 15px to 16px, and on Altineris everything below 12px — forty-six separate declarations, the smallest of them 8px — up to 12px.

The wiring diagram was the worst of it, by a factor of two

The diagram on the homepage is SVG, and its labels are set in user units, not pixels. Its canvas is 640 units wide and its container is capped at 640px, so on a desktop the scale is exactly 1 and a label declared at 6.5 renders at 6.5 actual pixels. That is smaller than any text on the page had any business being.

On a phone it is worse, because the container is now about 362px wide. Same 640-unit canvas, so everything scales by 0.57, and a 6.5px label renders at roughly 3.7px.

There is no font size you can set in a scaling SVG that survives that, because the scaling applies to the type as well.

The first fix was worse than the bug

The obvious move was to stop the diagram shrinking: keep its true 640px width below the fold-point and let it pan sideways inside a framed strip, the way the tables already do on narrow screens.

That is what shipped first, and it was wrong. On a 390px phone it put a 640px plate in a 362px window, so nearly half the diagram sat off the right edge with nothing to suggest it could be dragged. CLAUDE CC was cut to CLAUDE C. DEVCLUSTER was cut to DEVCLUSTI. Text that is legible but sliced in half reads as broken, and broken is a worse failure than small.

It survived review because the screenshots lied. Headless Chrome enforces a minimum window width of about 500px, so every "390px phone" render taken to check the work was actually 500px — wide enough that the clipping looked like a deliberate crop. The real viewport only appeared when the page was loaded inside a 390px iframe, at which point the problem was obvious in one glance.

The system's own rule had the answer written down already: mobile is the sheet folded, not shrunk. A strip that pans is shrinking with extra steps. Folding means drawing a different plate.

So the diagram now has two. The same seven nodes, the same edges and the same codes exist in a wide 640×560 arrangement and a folded 360×910 one, laid out as a vertical spine. One renderer draws either; CSS displays exactly one at the fold-point, which also takes the hidden one out of the tab order and the accessibility tree. At phone width the folded plate renders at a scale of about 1, so its labels land at their true 10px and 9px, with no panning and no clipping.

The laws changed first

None of this could be done quietly, because the drawing system is versioned and public. The type range in the specification said 8–9px; it now says 9–10px. There is a new law about contrast and a floor, and it names deep as an ink that draws rather than speaks. The sheet at the foot of every page has ticked from revision A to revision B.

That is the part worth keeping. A design system that cannot be amended in public just becomes a set of rules people quietly break, and the amendment is a smaller admission than the alternative — which is a site that fails a published minimum while claiming, in its own footer, that everything on it is checkable.