This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
md-input placeholder (label) text contrast too low for a11y #8903
Description
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.xAngular 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.
Activity
srthomas1 commentedon Jun 29, 2016
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 commentedon Jun 29, 2016
Hi @srthomas1 We are aware of this and are actively working towards fixing it.
Related #8872
srthomas1 commentedon Jun 29, 2016
Great. Thanks!
clshortfuse commentedon Jul 1, 2016
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 commentedon Aug 2, 2016
@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:
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 commentedon Aug 4, 2016
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 commentedon Aug 4, 2016
@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)
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
clshortfuse commentedon Aug 4, 2016
I think the key is
from the link above. When an input container is not focused, it is inactive and has no contrast requirement, so placeholder color is fine.
Giving the input container focus would make it an active item. Raising contrast to WCAG Level AA on focus is fine with me.
fix(input): increase placeholder contrast on focus
fix(input): increase placeholder contrast on focus (#9804)