Avatar and Loader
A person, and the wait for one. Both were saying things in colour alone.
Avatar
The drawn placeholder was below AA.
White initials on a mid-grey circle measure 3.98:1, and initials are text. It uses surface/inverse with text/inverse instead — 19.4:1 in light, 18.1:1 in dark — which also flips by theme, so the avatar reads on a dark card as well as a light one.
Status
Five states, each with a name. Drawn, status was colour and nothing else: available and busy were the same thing to anyone who cannot separate green from red, and to every screen reader. Three of the five also failed 3:1 against a white card — available at 1.67:1, idle at 1.61:1, away at 1.96:1.
Hover or tab a screen reader through them — each dot says its state in words.
Groups
Overlapping avatars with a count for the rest. The count is written out for a screen reader — and 3 more, not +3.
Loader
One arc on a faint track, 18px across inside a 24px box, that turns at a steady speed while it grows and shrinks, so it never reads as a still shape. It is not what is drawn: the drawing has two arcs, 18px and 9px, turning in opposite directions in the brand’s two colours. The single arc has been built since 2026-09-08, and the 16 and 32 sizes were added beside the drawn 24; neither departure was recorded as a decision. This paragraph said “two arcs, as drawn” (corrected 2026-09-24, fidelity audit).
Inside a button
The same component, taking the label’s colour rather than the system’s. One spinner in the system, not two.
Accessibility
A loader with a label is a live region and says what is being waited for. Without one it is decoration — which is right inside a button that already carries aria-busy, where a second announcement repeats what the button said.
Reduced motion slows the arc rather than stopping it. A frozen spinner reads as a hung page, and the preference asks for less motion, not none.
An avatar without an image shows initials, but two letters are not a name — the full name is present for a screen reader to read.