[material-ui][Alert] - Accessibility Contrast Error

[peclarke]

According to the web accessibility evaluation tool (https://wave.webaim.org/), the filled variants of the warning and info alerts fail accessibility contrast tests.

This screenshot was taken on https://mui.com/material-ui/react-alert/ today, and notes the following issue

Very low contrast (3.85:1) - Very low contrast between text and background colors

The Wave Accessibility Tool addresses some possible fixes for this as follows:

Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.

And some additional information:

Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

https://webaim.org/standards/wcag/checklist#sc1.4.3

Search keywords:

[siriwatknp]

We don't have plan to update the styles at the moment. For workaround, you can customize the theme like this:

https://stackblitz.com/edit/ctspspig?file=src%2FDemo.tsx

const theme = createTheme({
  components: {
    MuiAlert: {
      styleOverrides: {
        root: ({ theme }) => ({
          variants: [
            {
              props: { variant: 'filled', severity: 'success' },
              style: {
                backgroundColor: theme.palette.success.dark,
              },
            },
            {
              props: { variant: 'filled', severity: 'info' },
              style: {
                backgroundColor: theme.palette.info.dark,
              },
            },
            {
              props: { variant: 'filled', severity: 'warning' },
              style: {
                backgroundColor: theme.palette.warning.dark,
              },
            },
            {
              props: { variant: 'filled', severity: 'error' },
              style: {
                backgroundColor: theme.palette.error.dark,
              },
            },
          ],
        }),
      },
    },
  },
});

[iamAfrontendDev]

Hi everyone, I’ve started working on fixing alert contrast accessibility. Updating filled variants to use white text for all severities to meet WCAG.

[iamAfrontendDev]

@siriwatknp @peclarke I've created a PR to address this issue:https://github.com/mui/material-ui/pull/46829#issue-3354836245