Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core] Accessibility - increase default contrastThreshold for WCAG AA compliance #34901

Merged
merged 5 commits into from Nov 14, 2022
Merged

[core] Accessibility - increase default contrastThreshold for WCAG AA compliance #34901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b44f2c
feat: increase base contrast ratio for WCAG AA compliance
Oct 26, 2022
9c6b151
fix: unit tests as color changed
Oct 27, 2022
624e047
fix: revert wcag 2.1 fix, and just add docs
Nov 10, 2022
b683333
Update docs/data/material/customization/palette/palette.md
kennethbigler Nov 11, 2022
465ec94
update content
siriwatknp Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/data/material/customization/color/color.md
View file
Open in desktop
Expand Up @@ -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.
19 changes: 17 additions & 2 deletions docs/data/material/customization/palette/palette.md
View file
Open in desktop
Expand Up @@ -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

Expand Down