[TextField] Accessibility contrast issue with filled variant

[tcx]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

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:

1. Launch Chrome/Chromium
2. Go to https://next.material-ui.com/components/text-fields/
3. Launch Developer Tools
4. Run a Lighthouse accessibility audit

Context 🔦

I want filled variants of TextField to be accessible out of the box.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Linux 5.10 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
  Binaries:
    Node: 14.15.4 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.10 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 85.0.1

[oliviertassinari]

@tcx Thanks, I would propose the following (In case you want to work on it, all 🟢):

1. Update the secondary text color to match the update of the spec:

https://material.io/design/color/text-legibility.html#text-backgrounds

Medium-emphasis text and hint text have opacities of 60%

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.

2. We reduce the opacity of the filled background, it's simply ugly cc @mbrookes. It looks like the field is disabled.

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:

[eps1lon]

Why do we need to change the palette and TextField to change the color contrast?

[oliviertassinari]

@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

[eps1lon]

@eps1lon The change of the palette would be to match the latest version of the Material Design Guidelines.

So it's unrelated to this issue?

[oliviertassinari]

So it's unrelated to this issue?

What do you mean by unrelated? It fixes the contrast issue, as a positive second order effect.

[Dripcoding]

@oliviertassinari is anyone working on this issue? I'd like to work on this as my first contribution to the repository.

[oliviertassinari]

@Dripcoding You can go ahead :)

[eps1lon]

It fixes the contrast issue, as a positive second order effect.

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.

[oliviertassinari]

It looks like you're trying to change something else here.

@eps1lon I see 4 values:

1. Update the palette to match the spec
2. Bring AA contrast on the filled input
3. Fix the ugly grey background-color
4. Remove the potential confusion around the filled input being disabled

I think that 1. can be solved independently. I don't think that 2,3,4 can.