From 1b44f2c38630abb5dc89fa4ddede44efb0db8219 Mon Sep 17 00:00:00 2001 From: Ken Bigler Date: Thu, 27 Oct 2022 10:33:39 +1100 Subject: [PATCH 1/5] feat: increase base contrast ratio for WCAG AA compliance --- packages/mui-material/src/styles/createPalette.js | 2 +- packages/mui-material/test/typescript/styles.spec.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js index 775ee2e55d14e0..f723a412766190 100644 --- a/packages/mui-material/src/styles/createPalette.js +++ b/packages/mui-material/src/styles/createPalette.js @@ -182,7 +182,7 @@ function getDefaultWarning(mode = 'light') { } export default function createPalette(palette) { - const { mode = 'light', contrastThreshold = 3, tonalOffset = 0.2, ...other } = palette; + const { mode = 'light', contrastThreshold = 4.5, tonalOffset = 0.2, ...other } = palette; const primary = palette.primary || getDefaultPrimary(mode); const secondary = palette.secondary || getDefaultSecondary(mode); diff --git a/packages/mui-material/test/typescript/styles.spec.tsx b/packages/mui-material/test/typescript/styles.spec.tsx index 772c4ef5f1bedd..13005a72c47fe7 100644 --- a/packages/mui-material/test/typescript/styles.spec.tsx +++ b/packages/mui-material/test/typescript/styles.spec.tsx @@ -9,7 +9,7 @@ import { blue } from '@mui/material/colors'; palette: { mode: 'dark', primary: blue, - contrastThreshold: 3, + contrastThreshold: 4.5, tonalOffset: 0.2, common: { white: '#ffffff', From 9c6b15106b647092daa032a9b675615f50489142 Mon Sep 17 00:00:00 2001 From: Ken Bigler Date: Thu, 27 Oct 2022 11:56:26 +1100 Subject: [PATCH 2/5] fix: unit tests as color changed --- packages/mui-material/src/styles/createPalette.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/createPalette.test.js b/packages/mui-material/src/styles/createPalette.test.js index d992456ec26131..8c2a0ba3e8ed6c 100644 --- a/packages/mui-material/src/styles/createPalette.test.js +++ b/packages/mui-material/src/styles/createPalette.test.js @@ -13,7 +13,7 @@ describe('createPalette()', () => { light: deepOrange[300], main: deepOrange[500], dark: deepOrange[700], - contrastText: dark.text.primary, + contrastText: light.text.primary, }); }); From 624e0476ed10376354f13f9a8ce592448f1b4a36 Mon Sep 17 00:00:00 2001 From: Ken Bigler Date: Thu, 10 Nov 2022 10:32:53 +0530 Subject: [PATCH 3/5] fix: revert wcag 2.1 fix, and just add docs --- .../material/customization/color/color.md | 8 +++++++ .../material/customization/palette/palette.md | 23 +++++++++++++++++-- .../mui-material/src/styles/createPalette.js | 2 +- .../src/styles/createPalette.test.js | 2 +- .../test/typescript/styles.spec.tsx | 2 +- 5 files changed, 32 insertions(+), 5 deletions(-) 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..d88cca2c72429d 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -46,6 +46,7 @@ interface PaletteColor { main: string; dark?: string; contrastText?: string; + contrastThreshold?: number; } ``` @@ -130,9 +131,27 @@ 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 off 3:1). -Note that "contrastThreshold" follows a non-linear curve. +### 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. +If you would like to meet WCAG 2.1 AA compliance, you will want to provide a "contrastThreshold" value of +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 diff --git a/packages/mui-material/src/styles/createPalette.js b/packages/mui-material/src/styles/createPalette.js index f723a412766190..775ee2e55d14e0 100644 --- a/packages/mui-material/src/styles/createPalette.js +++ b/packages/mui-material/src/styles/createPalette.js @@ -182,7 +182,7 @@ function getDefaultWarning(mode = 'light') { } export default function createPalette(palette) { - const { mode = 'light', contrastThreshold = 4.5, tonalOffset = 0.2, ...other } = palette; + const { mode = 'light', contrastThreshold = 3, tonalOffset = 0.2, ...other } = palette; const primary = palette.primary || getDefaultPrimary(mode); const secondary = palette.secondary || getDefaultSecondary(mode); diff --git a/packages/mui-material/src/styles/createPalette.test.js b/packages/mui-material/src/styles/createPalette.test.js index 8c2a0ba3e8ed6c..d992456ec26131 100644 --- a/packages/mui-material/src/styles/createPalette.test.js +++ b/packages/mui-material/src/styles/createPalette.test.js @@ -13,7 +13,7 @@ describe('createPalette()', () => { light: deepOrange[300], main: deepOrange[500], dark: deepOrange[700], - contrastText: light.text.primary, + contrastText: dark.text.primary, }); }); diff --git a/packages/mui-material/test/typescript/styles.spec.tsx b/packages/mui-material/test/typescript/styles.spec.tsx index 13005a72c47fe7..772c4ef5f1bedd 100644 --- a/packages/mui-material/test/typescript/styles.spec.tsx +++ b/packages/mui-material/test/typescript/styles.spec.tsx @@ -9,7 +9,7 @@ import { blue } from '@mui/material/colors'; palette: { mode: 'dark', primary: blue, - contrastThreshold: 4.5, + contrastThreshold: 3, tonalOffset: 0.2, common: { white: '#ffffff', From b683333ed57dbb7046347862f9291170bab531aa Mon Sep 17 00:00:00 2001 From: Ken Bigler Date: Thu, 10 Nov 2022 18:39:43 -0800 Subject: [PATCH 4/5] Update docs/data/material/customization/palette/palette.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michał Dudak Signed-off-by: Ken Bigler --- docs/data/material/customization/palette/palette.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index d88cca2c72429d..f6e447b10957d8 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -132,7 +132,7 @@ 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". Note that "contrastThreshold" follows a non-linear curve, and -starts with a value of 3 (requiring a minimum contrast ratio off 3:1). +starts with a value of 3 (requiring a minimum contrast ratio of 3:1). ### Accessibility From 465ec94ed35db840f4bab727c434aa2ed8051343 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 14 Nov 2022 11:48:29 +0700 Subject: [PATCH 5/5] update content --- docs/data/material/customization/palette/palette.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index f6e447b10957d8..b2f62b4e9af3fd 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -46,7 +46,6 @@ interface PaletteColor { main: string; dark?: string; contrastText?: string; - contrastThreshold?: number; } ``` @@ -136,10 +135,7 @@ starts with a value of 3 (requiring a minimum contrast ratio of 3:1). ### 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. -If you would like to meet WCAG 2.1 AA compliance, you will want to provide a "contrastThreshold" value of -4.5. +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';