diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index cfd473cb8174a0..e3b3306f240d42 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -109,3 +109,11 @@ const primary = red[500]; // #f44336 const accent = purple['A200']; // #e040fb const accent = purple.A200; // #e040fb (alternative method) ``` + +### Accessibility + +[WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) does recommend +that you have a minimum of a 4.5:1 contrast ratio for the visual presentation of text and images of text. +Material UI currently only enforces a 3:1 contrast ratio. If you would like to meet WCAG 2.1 AA compliance, +you can increase your minimum contrast ratio as described in the +[Theme customization](/material-ui/customization/palette/#accessibility) section. diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index 6042c7f8e2dcc7..b2f62b4e9af3fd 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -130,9 +130,24 @@ type PaletteTonalOffset = A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker. A higher value for "contrastThreshold" increases the point at which a background color is considered -light, and given a dark "contrastText". +light, and given a dark "contrastText". Note that "contrastThreshold" follows a non-linear curve, and +starts with a value of 3 (requiring a minimum contrast ratio of 3:1). -Note that "contrastThreshold" follows a non-linear curve. +### Accessibility + +To meet the minimum contrast of at least 4.5:1 as defined in [WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), create a custom theme with `contrastThreshold: 4.5`. + +```js +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + palette: { + // Used by `getContrastText()` to maximize the contrast between + // the background and the text. + contrastThreshold: 4.5, + }, +}); +``` ### Example