Skip to content

[TextField] red error text fails a11y contrast ratio requirement of 4.5:1 #26288

@slayybelle

Description

@slayybelle

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:

  1. https://next.material-ui.com/components/text-fields/
  2. Go to Validation section where there's demo of red error text
  3. 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

Screen Shot 2021-05-13 at 6 08 12 PM

Context 🔦

a11y testing; conformance required by customers

Your Environment 🌎

Your demo page (see url above, step 1); also happens on latest 4.x

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilitya11ybreaking changeIntroduces changes that are not backward compatible.design: materialThis is about Material Design, please involve a visual or UX designer in the processscope: text fieldChanges related to the text field.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions