How to pick initials colors?

Derive from the name for consistency, with enough contrast.

Is avatar alt text required?

Empty alt when the name is adjacent; otherwise use the name.

Avatar UI

⚙️ Engineering & Technology By CampusDown Wiki Editorial Team Last updated October 27, 2026

An avatar is a small image representing a user as a photo, initials or default icon.

Contents

1. Why avatars matter
2. Without a photo
3. Status and accessibility
4. FAQ
5. References

Why avatars matter

Avatars show who spoke before text does. People form impressions from 100 ms of a face (Willis & Todorov, 2006), so photos shape trust, though they may misrepresent (Hancock & Toma, 2009); add verification badges in marketplaces. Define size steps per visual hierarchy.

Without a photo

Use initials on colored backgrounds or patterned defaults (Gravatar, n.d.); identical grey silhouettes blur identities. Fall back to initials on load failure and reserve dimensions (MDN, n.d.). Keep color contrast.

Status and accessibility

Add shape or text to presence dots, show '+5' for stacks, use empty alt when the name is adjacent (W3C, n.d.) and the name otherwise, per WCAG 2.2 (W3C, 2023) 1.1.1 and 1.4.3. Expand tap areas to touch target sizes (Parhi et al., 2006).

FAQ

How to pick initials colors?: Derive from the name for consistency, with enough contrast.
Is avatar alt text required?: Empty alt when the name is adjacent; otherwise use the name.

Sources reviewed: 2026-10-27

References

World Wide Web Consortium. (n.d.). Images tutorial. Web Accessibility Initiative. Decorative vs informative alt text.
MDN Web Docs. (n.d.). <img>: The Image Embed element. Fallbacks and sizing.
Gravatar. (n.d.). Gravatar developer documentation. Default avatar options.
Willis, J., & Todorov, A. (2006). First impressions: Making up your mind after a 100-ms exposure to a face. Psychological Science, 17(7), 592–598. Fast face impressions.
Hancock, J. T., & Toma, C. L. (2009). Putting your best face forward: The accuracy of online dating photographs. Journal of Communication, 59(2), 367–386. Photo accuracy and trust.
Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. Tap areas for small avatars.
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criteria 1.1.1 and 1.4.3.

Reports and materials that use this theory (Korean)

There are no materials dedicated to this theory yet, but you can search related reports in the CampusDown library (Korean).

Find more reports · Search '아바타' on CampusDown →

Color contrastWhy the same color looks different depending on its surroundings: simultaneous and successive contrast; value, hue, saturation, complementary, and extension contrast; Chevreul and Albers; and the WCAG 4.5:1 contrast ratio for accessible design.🔬 Natural Sciences Visual HierarchyVisual hierarchy is the order that decides what users see first and next. Drawing on feature-integration theory, Gestalt grouping and eye-tracking research, it covers size, colour, contrast and spacing and how to apply them on mobile.⚙️ Engineering & Technology Touch Target SizeWhat touch target size means, the 9 mm research, 44pt and 48dp platform guidelines, the WCAG 2.2 target-size criteria, the fat-finger problem and why spacing matters as much as size.⚙️ Engineering & Technology AI Search Algorithms: A* and MinimaxAI search algorithms explained: state-space search, breadth-first and depth-first search, Dijkstra, heuristics and A* (admissibility, consistency), game trees, minimax and alpha-beta pruning, based on the original papers.⚙️ Engineering & Technology

Latest ArticlesView all ›

New guides for college study and assignments (Korean)

This article was last updated on October 27, 2026. It is based on widely recognized original works and textbooks; when citing it in a paper, please check the original sources listed in the references.