Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Chip text grey color breaks contrast requirements when Avatar with text is used inside

Open Beginner friendly
  • Is something wrong?
#49,547 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
accessibility, frontend

Research direction

Start in the Chip and Avatar component styles, especially the theme rules shown in the issue. Reproduce the avatar chip example in dark theme and check which Chip text rule overrides the Avatar text color. Adjust the styles so Chip text rules do not affect a nested Avatar, then verify the avatar initials meet contrast requirements.

Written by the indexing model from the issue text.

Description

status: waiting for maintainer
Steps to reproduce

Steps:

  1. Open this link to live example: (required)
  2. See the example of the Chip with Avatar inside that uses initials
  3. Use dark theme
  4. 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

Dominant language
JavaScript
Stars
99.2k
Forks
32.5k
Avg merge
1d 15h
Merged PRs (30d)
212

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.