WCAG Score - Not compliant
Provided by the component
- Contrast:
- Avatars rely on predefined background and text color combinations designed to meet WCAG 2.1 contrast requirements.
- Do not modify or iterate these colors arbitrarily, custom palettes may reduce readability and fail accessibility checks.
- System-provided colors are tested to maintain sufficient contrast between initials and background at all supported sizes.
- Size and legibility:
- Choose avatar sizes that are large enough for initials or imagery to remain recognizable. Very small avatars may reduce clarity for low-vision users.
- Respect system-defined size tokens to maintain both visual hierarchy and legibility.
Implementation considerations
- Remark that ariaLabel and altText should be complementary to each other
- If Avatar is empty, it means it has no image or initials associated yet, we have an aria-label as “No Avatar”. In case there is a name associated, we should provide it with the aria-label
- When the imageSrc is provided, an alt attribute should be used.
- When the initials is provided, then aria-label needs to be provided and it should indicate the name associated.