Avatar and Loader

A person, and the wait for one. Both were saying things in colour alone.

Avatar

Leonor Viana
xxs
Leonor Viana
xs
Leonor Viana
sm
Leonor Viana
md
Leonor Viana
lg
Leonor Viana
xl

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.

Leonor VianaLeonor VianaLeonor VianaLeonor VianaLeonor Viana

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.

Leonor VianaAna CostaBruno Diasand 3 more

Loader

Two arcs turning in opposite directions, as drawn — 18px and 9px inside a 24px box. The counter-rotation is what stops it reading as one thick ring.

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 arcs rather than stopping them. 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.