Avatars & Badges

## What the avatar has to guarantee An **avatar** is a small, fixed-size representation of a person or an entity (a client company, an agency, a team) shown beside comments, in message threads, on proposal cards and in headers. On a freelance job marketplace it appears dozens of times per screen, for people who never uploaded a photo, whose image link has expired, or whose photo is still downloading on a slow mobile connection. The design problem is therefore not "show a picture" but "always show something recognisable, in the same box, whatever the image does". Three guarantees follow from that: - **Never a broken state.** A failed image must never surface as the platform's broken-image glyph, an empty box or a collapsed element. - **Never a layout shift.** The frame is sized by the avatar's size tier, not by the image, so moving from one step of the chain to the next moves nothing around it. - **Always the same identity.** The same person looks the same on every screen and on every visit. ## The fallback chain A robust spec defines an ordered chain and the trigger that moves down it: 1. **Photo** — shown once it has actually loaded, cropped to the frame the same way everywhere. 2. **Initials** — shown while the photo is absent, still loading, or has failed, as long as a usable name exists. 3. **Placeholder** — a generic glyph when there is neither a photo nor a name that yields initials. | Step | Shown when | Stays the same | |---|---|---| | Photo | the image loaded successfully | frame size, shape, border | | Initials | no photo, still loading, or load error | frame, the person's color | | Placeholder | no photo and no usable name | frame, a neutral color | Showing the initials *while* the photo loads, then swapping the photo in, is common practice. It gives a slow connection something meaningful at once, and it makes the error path identical to the loading path, so there is one fewer state to design and test. ## Deriving initials Initials look trivial and carry most of the edge cases: - **Two characters is the usual maximum** — first given name and last family name. More crowds the frame at small sizes. - **Single names** (mononyms, many company names) give one character. - **Scripts without letter case, or without a given/family split**, can make two-letter initials meaningless. Many systems use the first character, or go straight to the placeholder where initials are not a cultural convention. - **Emoji, punctuation and leading symbols** in display names are stripped before characters are picked. - **Uppercase**, by convention, where the script has case. ## Color for initials The initials step needs a background color, and two rules make it work: - **Deterministic.** Pick from a fixed set of colors by hashing a stable identifier — the account ID, not the display name, which the person can edit. The same person then keeps the same color across screens, devices and sessions. - **Legible.** The initials are text. WCAG 2.2 success criterion 1.4.3 Contrast (Minimum) asks for 4.5:1 for normal text and 3:1 for large-scale text (at least 18 point, or 14 point bold). Text that is pure decoration is exempt, but an avatar is not always decorative, so checking every background in the set against the initials color at 4.5:1 is the safe default. The color is identity reinforcement only. It must never *encode meaning*, such as client versus freelancer: the colors are assigned by hash, not by category, and meaning carried by color alone fails WCAG 1.4.1 Use of Color. If the distinction matters, use shape or a text label. ## Placeholder and entity type The placeholder is the last resort, and it should still say *what kind of thing* this is. A common convention is a circle for people and a rounded square for organizations, each with its own glyph, so a client company and a freelancer stay distinguishable even with no image and no name. The placeholder uses a neutral color outside the identity set, so it is not mistaken for a real person's initials. ## Text alternative across the chain Whichever step renders, the avatar means the same thing, so its text alternative does not change with the step: it is the person's or the entity's name — never a description of the photo. When the name is already printed next to the avatar, as in a comment header, the avatar adds nothing and is treated as decorative so the name is not heard twice. WCAG 1.1.1 Non-text Content (Level A) covers both cases: a text alternative that serves the equivalent purpose, or, for decoration, a way for assistive technology to ignore it. How that name is attached to the element is a naming-mechanism question the accessibility rules own.