-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
Closed
Closed
Copy link
Labels
accessibilitya11ya11ybreaking changeIntroduces changes that are not backward compatible.Introduces changes that are not backward compatible.design: materialThis is about Material Design, please involve a visual or UX designer in the processThis is about Material Design, please involve a visual or UX designer in the processscope: text fieldChanges related to the text field.Changes related to the text field.type: bugIt doesn't behave as expected.It doesn't behave as expected.
Description
Even on a white background, the error text for [TextField] is flagged at < 4.5:1 ratio, unacceptable for accessibility
- 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 default red error text is too light against the best-case white background
Expected Behavior 🤔
It should be at least 4.5:1 on a white background; Default behavior on hover often darkens the background, requiring an even darker red to pass
Steps to Reproduce 🕹
Steps:
- https://next.material-ui.com/components/text-fields/
- Go to Validation section where there's demo of red error text
- I'll attach a pic where I open dev tools and use Lighthouse element inspector to inspect the text and it flags the contrast violation
Context 🔦
a11y testing; conformance required by customers
Your Environment 🌎
Your demo page (see url above, step 1); also happens on latest 4.x
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
accessibilitya11ya11ybreaking changeIntroduces changes that are not backward compatible.Introduces changes that are not backward compatible.design: materialThis is about Material Design, please involve a visual or UX designer in the processThis is about Material Design, please involve a visual or UX designer in the processscope: text fieldChanges related to the text field.Changes related to the text field.type: bugIt doesn't behave as expected.It doesn't behave as expected.
