AvatarGroup +n icon's default colors do not meet minimum contrast ratio threshold for accessibility

Steps to reproduce

Link to live example: (required)
Every (+n) avatar on https://mui.com/material-ui/react-avatar/

Steps:

1. Visit the link above.
2. Run the axe Devtools chrome extension accessibility scan on that page.
3. Every (+n) avatar on the page gets flagged as not meeting the contrast ratio (in both light and dark mode, though I have screenshotted light mode for this particular example):

Current behavior

Axe devtools highlights all the (+n) avatars, with the message: Element has insufficient color contrast of 1.87 (foreground color: #ffffff, background color: #bdbdbd, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1

Expected behavior

The default colors on (+n) avatars should have a high enough contrast ratio to pass the accessibility scan.

Context

I am trying to fix accessibility issues on my site, and while I could override the avatar colors on my own, it seems worthwhile to make the default colors pass accessibility tests out of the box.

Your environment

  System:
    OS: macOS 12.7.6
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.59

This bug is likely system agnostic though since it is a default colors accessibility issue that can be seen on the mui website.

Search keywords: avatargroup default colors accessibility