md-input placeholder (label) text contrast too low for a11y

[srthomas1]

Actual Behavior:

• What is the issue? * Placeholder text for (the label) is set at rgba(0,0,0,0.38) or rgba(0,0,0,0.5) depending on the state. This results in text with a contrast ratio of 2.7 or 3.9, respectively, when the background color is white.
• What is the expected behavior? The minimum contrast ratio on text set forth by WCAG to achieve a Level AA accessibility rating is 4.5. Therefore the placeholder text (label) should be set at a minimum of rgba(0,0,0,0.54) whenever the information is considered important to the user.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

Angular Versions: *

• Angular Version: 1.x
• Angular Material Version: 1.1.0-RC.5

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[srthomas1]

From what I can parse, it looks like the foreground-3 color is the one I'm talking about. It gets set to 0.38 on light backgrounds and 0.5 on dark backgrounds. White at 0.5 opacity on black is OK, but black at 0.38 opacity on white is not.

[clshortfuse]

Hi @srthomas1 We are aware of this and are actively working towards fixing it.

Related #8872

[srthomas1]

Great. Thanks!

[clshortfuse]

Since the issue hasn't been fixed yet, I'm going to reopen this. @srthomas1, if you aren't interested in receiving notifications related to this, you can unsubscribe from notifications.

[clshortfuse]

@srthomas1 After wrapping up some changes with theme engine's contrast optionns , I took another look at this issue.

According to Web Content Accessibility Guidelines (WCAG) 2.0, there are exceptions to the minimum contrast ratio. Placeholder text would be classified as Incidental which is as follows:

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Since the placeholder is meant to be used when the input field is inactive, it doesn't have a contrast requirement. According to Material Design practices, the placeholder will convert into a float label that would indeed achieve the minimum contrast ratio for an active user interface component.

Therefore, there isn't a code change that should be implemented into Angular Material. If you want to make changes with your personal implementation, I believe you can do this without needing to fork our code, and instead, just using custom CSS.

[srthomas1]

I strongly disagree with this conclusion. The way that the text input fields work in Angular Material is that the label functions as both traditional 'placeholder' text AND the label for the field at the same time. Before focus is given to the field, the 'placeholder' label is the only visible text. The contrast of the label in this state is well below the WCAG guidelines and it is certainly not inconsequential text. In an empty form, this text is often the only clue to the function/content of the input field.

[clshortfuse]

@srthomas1 I can understand your frustration, but Angular Material does follow the Material Design specifications laid out here: https://material.google.com/components/text-fields.html#text-fields-labels

I took another look and I can confirm that the placeholder and label are the correct colors. Colors and capacities are from https://material.google.com/style/color.html#color-color-schemes

Placeholder: 38% (hint)
Label: 54% (secondary)

Before focus is given to the field, the 'placeholder' label is the only visible text.

This is not true. If you create an input container with a float label, it will have a 54% opacity which reaches the contrast ratio of 4.5. In other words, for a developer to have an input container that compiles with WCAG Level AA, he/she must use a floating label. Edit: (see next comment, inactive items don't have contrast requirements)

I did find one mistake in our implementation, where the placeholder text should convert to secondary opacity (54%) when it gets focused. I don't believe we do this, but this doesn't change the fact that it has a limited opacity when it doesn't have focus.

The fix would be to force placeholders to have secondary opacity when no label is present, so I'm going to reopen this and let other members on the team weight in.

@ThomasBurleson @topherfangio