skip to content

A freelance marketplace marks each freelancer's avatar with a green, amber or grey availability dot; which users does this fail, and how would you fix the spec?

level: seniorimportance: should knowfreq 45%

answer

  1. hue is the only difference
  2. grayscale screenshot test
  3. adjacent color, not the photo
  4. a shape per status
  5. status belongs in text too

basics

~20 s

Dots that differ only in hue fail people with color-vision deficiencies (WCAG 1.4.1), low-vision users when the dot lacks 3:1 contrast against its surroundings (1.4.11), and anyone relying on a text alternative. Fix with distinct shapes, a separating ring, and text.

solid answer

~50 s

The spec relies on hue alone, which fails WCAG 1.4.1 Use of Color (Level A): with a red-green deficiency, green and amber merge. A small dot sitting on an arbitrary photo also cannot guarantee the 3:1 against adjacent colors that 1.4.11 Non-text Contrast (AA) asks of graphics needed to understand content, and nothing gives availability to someone who cannot see the dot. I would give each status a **distinct shape** — filled for available, a clock glyph for away, a hollow ring for offline — surround the dot with a **ring in the surface color** so its adjacent color is known, show **'Available now'** as text wherever the layout allows, and put the status in the avatar's **text alternative**. The size scale then says at which avatar sizes the dot appears at all. I would verify with a grayscale screenshot and a screen-reader pass through search results.

go deeper

for a junior

Know that color must not be the only way information is shown, and that a status shown by a dot also needs a shape or text.

for a middle

Explain the difference between 1.4.1 Use of Color (a second cue is needed) and 1.4.11 Non-text Contrast (3:1 against adjacent colors), and why a ring around the dot matters.

for a senior

Diagnose the full failure — color, contrast, text alternative, vocabulary, staleness — and prescribe a fix you can verify: grayscale test, contrast per theme, screen-reader pass through results.

for a principal

Own the status vocabulary as a system-level contract across products, including who sets a status and how freshness is shown, because inconsistent meanings erode trust faster than any single visual defect.

## The spec as shipped A freelance job marketplace shows search results as rows of freelancer avatars. A small dot in the lower corner of each avatar signals availability: **green** for available now, **amber** for busy on another contract, **grey** for offline. Clients use it to decide whom to message first. The dots differ only in hue, sit directly on the profile photo, and have no text anywhere on the row. ## Who it fails | Who | What goes wrong | WCAG 2.2 criterion | |---|---|---| | People with a red-green color-vision deficiency | green and amber look alike | 1.4.1 Use of Color, Level A | | People with low vision | a tiny dot on a busy photo may not stand out from what surrounds it | 1.4.11 Non-text Contrast, Level AA (3:1) | | Screen reader users | availability is simply absent | 1.1.1 Non-text Content, Level A | | Everyone | no legend: does amber mean busy, away, or slow to reply? | usability, not conformance | The first row is the textbook case. **1.4.1 Use of Color** says color must not be the only visual means of conveying information. Three hues and no other difference is exactly that. Choosing a palette that is friendlier to color-blind users helps, but it does not fix the failure: the information is still carried by color alone, and people with no color perception at all still lose it. The second row is subtler. **1.4.11 Non-text Contrast** requires 3:1 against adjacent colors for parts of graphics required to understand the content; the WCAG understanding document gives status icons without associated text as an example. A dot laid on a photograph has an unknown neighbour — a green dot on a green sweater has no contrast at all. ## Fixing the spec 1. **A distinct shape per status.** Filled circle for available, a clock glyph for away, a bar or minus for busy, a hollow ring for offline. The shapes survive grayscale, and they keep working at the edge of legibility better than hue does. 2. **A separating ring.** Surround the dot with a ring in the surface color. Its adjacent color is now known in every theme, so 3:1 becomes checkable and stays true whatever the photo shows. 3. **Text where the layout allows.** In search results, print "Available now" or "Last active 3 hours ago" under the name. The dot is a shorthand for the text, not a replacement. 4. **Status in the text alternative.** Where the avatar carries the name, add the status: "Amina Diallo, available now". The avatar's name and status are one piece of information. 5. **Size rules.** The avatar size scale states at which sizes the dot appears and how large it is. At the smallest sizes, where no shape can be legible, drop the dot and show status as text elsewhere. 6. **One vocabulary.** The system defines the set of statuses once — their meanings, their shapes, and whether the person sets them or the product infers them — so amber never means "busy" on one screen and "away" on another. 7. **Freshness.** Presence goes stale. A green dot for someone who closed the app yesterday is worse than a "last active" timestamp. ## A grey dot reads as disabled Grey carries a second trap: in most interfaces it means *unavailable to interact with*. A grey dot on an offline freelancer can make the whole profile look disabled. A hollow ring for offline says "not here now" without implying the profile cannot be opened. ## Verifying the fix - **Grayscale screenshot**: every status must still be tellable apart. - **Color-vision simulation** for the common deficiencies, as a second check. - **Contrast check** of each dot fill against its separating ring, in every theme. - **Screen-reader walkthrough** of a search results page, confirming that each freelancer's availability is heard along with the name. - **A quick usability probe**: ask five clients what each status means without a legend. If they disagree, the vocabulary needs text, not better hues.

  • Does switching to a color-blind-friendly palette make hue-only availability dots conform to WCAG 1.4.1?
    No. 1.4.1 Use of Color is about color being the only visual means of conveying the information, not about which colors are chosen. A friendlier palette helps many people but still fails anyone who cannot perceive the difference, including people with no color perception. A second cue, such as shape, pattern or text, is what satisfies the criterion.
  • Why does a separating ring make an availability dot's contrast checkable?
    WCAG 1.4.11 measures contrast against adjacent colors. Laid directly on a photo, the dot's neighbours are whatever the photo contains, so no fixed check can pass. A ring in the surface color makes the neighbour known in every theme, so the dot fill can be verified at 3:1 once, per theme.
  • What should an avatar spec do with the availability dot at its smallest sizes?
    State a size below which the dot is not shown, because a status shape cannot be legible there, and require that availability then appears as text elsewhere on the row. Shrinking the dot further only reintroduces a hue-only signal that nobody can read.

saying these in an interview costs you the question

  • A color-blind-friendly palette alone makes hue-only status dots conform
  • Status dots are decorative, so they need no text alternative
  • Contrast only matters for text, so a small status dot has no contrast requirement
  • A tooltip on the dot is enough to explain what each color means
  • Making the dots larger fixes the problem because bigger hues are easier to tell apart
  • A dot laid straight on the photo is fine because its own fill color defines its contrast