Repository navigation
Chip text grey color breaks contrast requirements when Avatar with text is used inside #49547
Description
Steps to reproduce
Steps:
- Open this link to live example: (required)
- See the example of the Chip with Avatar inside that uses initials
- Use dark theme
- See that the avatar text color compared to its background does not meet contrast requirements: https://webaim.org/resources/contrastchecker/?fcolor=616161&bcolor=BDBDBD
Current behavior
In dark theme, the text color computed inside MUII Chip overrides the Avatar text color when it is placed inside. This new color combined with Avatar background dolor do not meet the WCAG contrast requirements: https://webaim.org/resources/contrastchecker/?fcolor=616161&bcolor=BDBDBD
memoTheme(({ theme }) => {
const textColor =
theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
return {{
backgroundColor: theme.palette.grey[400],
...theme.applyStyles('dark', { backgroundColor: theme.palette.grey[600] }),
}),Expected behavior
Text rules of Chip component should not be applied to Avatar component used inside
Context
No response
Your environment
npx @mui/envinfo
System:
OS: macOS 26.6.2
Binaries:
Node: 24.16.0 - /usr/local/bin/node
npm: 11.13.0 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: 156.0.8078.47
Edge: Not Found
Firefox: Not Found
Safari: 26.6.2
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.1
@mui/core-downloads-tracker: 9.5.0
@mui/icons-material: ^9.5.0 => 9.5.0
@mui/lab: ^9.0.0-beta.3 => 9.0.0-beta.3
@mui/material: ^9.5.0 => 9.5.0
@mui/private-theming: 9.5.0
@mui/styled-engine: 9.5.0
@mui/system: 9.5.0
@mui/types: 9.5.0
@mui/utils: 9.5.0
@types/react: ^19.2.18 => 19.2.18
react: ^19.2.8 => 19.2.8
react-dom: ^19.2.8 => 19.2.8
typescript: ^6.0.3 => 6.0.3
Search keywords: chip avatar contrast grey text color
Activity
iBreaker commentedon Oct 26, 2026
I am working on the default Chip avatar contrast in light and dark themes. I will cover both the CSS variable and non-variable theme paths and add a focused regression test.