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.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextField] Accessibility contrast issue with filled variant #24947
Comments
@tcx Thanks, I would propose the following (In case you want to work on it, all 馃煝):
https://material.io/design/color/text-legibility.html#text-backgrounds
It will also help with @eps1lon's concern around differentiating disabled from secondary: diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js
index 1a8e17b707..d827ab21bc 100644
--- a/packages/material-ui/src/styles/createPalette.js
+++ b/packages/material-ui/src/styles/createPalette.js
@@ -16,7 +16,7 @@ export const light = {
// The most important text.
primary: 'rgba(0, 0, 0, 0.87)',
// Secondary text.
- secondary: 'rgba(0, 0, 0, 0.54)',
+ secondary: 'rgba(0, 0, 0, 0.6)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
}, It also solves our contrast ratio issue.
diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 8d52f09140..1796dcc353 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -37,7 +37,7 @@ const FilledInputRoot = experimentalStyled(
)(({ theme, styleProps }) => {
const light = theme.palette.mode === 'light';
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
- const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
+ const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
return {
/* Styles applied to the root element. */
position: 'relative',
@@ -49,14 +49,14 @@ const FilledInputRoot = experimentalStyled(
easing: theme.transitions.easing.easeOut,
}),
'&:hover': {
- backgroundColor: light ? 'rgba(0, 0, 0, 0.13)' : 'rgba(255, 255, 255, 0.13)',
+ backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)',
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor,
},
},
'&.Mui-focused': {
- backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)',
+ backgroundColor,
},
'&.Mui-disabled': {
backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)', It still reaches AA: |
Why do we need to change the palette and TextField to change the color contrast? |
@eps1lon The change of the palette would be to match the latest version of the Material Design Guidelines. The change of the TextField is optional, it would be to say: "no Material Design, your filled input is ugly, it's too grey, it looks disabled", e.g. https://twitter.com/aardrian/status/1358062642544410624 |
So it's unrelated to this issue? |
What do you mean by unrelated? It fixes the contrast issue, as a positive second order effect. |
@oliviertassinari is anyone working on this issue? I'd like to work on this as my first contribution to the repository. |
@Dripcoding You can go ahead :) |
What does that mean? I think there's something wrong with the filled TextField if we need to change colors in two places. It looks like you're trying to change something else here. |
@eps1lon I see 4 values:
I think that 1. can be solved independently. I don't think that 2,3,4 can. |
Current Behavior 馃槸
The current filled variant of TextField does not pass the Lighthouse accessibility check on contrast.
Expected Behavior 馃
The text color should follow the material design specs, which will make the Lighthouse accessibility check on contrast pass.
Steps to Reproduce 馃暪
Steps:
Context 馃敠
I want filled variants of TextField to be accessible out of the box.
Your Environment 馃寧
`npx @material-ui/envinfo`
The text was updated successfully, but these errors were encountered: