Component > Form > #a11y placeholder text contrast issue

[arbydev]

http://carbondesignsystem.com/components/form/code

The contrast of your placeholder text does not meet contrast requirements.

Here is some CSS that would allow you to override the color in various browsers.

::-webkit-input-placeholder {
color: #777677;
}

:-moz-placeholder { /* Firefox 18- */
color: #777677;
}

::-moz-placeholder { /* Firefox 19+ */
color: #777677;
}

:-ms-input-placeholder {
color: #777677;
}

Be sure to check the contrast ratio to ensure it works on the field background color you choose.

Also you may want to inform users that is best to not duplicate the field label text as placeholder text as screen readers may duplicate the text spoken providing a poor user experience. Placeholder text should not be the field label or instructional text as it disappears when text is entered. This can be problematic for users with certain cognitive issues like short term memory loss. It can also be confusing for any user who needs to return to the form in the future and no visible label is there. You can use placeholder text, just keep it to things like hints and not instructional text.

[aagonzales]

Color contrast

Hello, we always check color contrast ratio. Accessibility is very important to us. What tool are you using to test accessibility? Some tools don't pick up on the combined background color of the field (which is an opacity) the native background color. Some tools don't read the color correctly and will therefore will throw an error. We have talked directly with the IBM accessibility team about this topic and have received their sign-off that would hint text and fields do in face pass color contrast rules.

The combined color of the field (rgba(60, 112, 178, .1)) + the background color of (#f5f7fa) make the color#E2E8F2. And that with our hint text color #5a6872 does pass the color contrast test.

Placeholder text

You are correcting in saying placeholder text should not be a label or instructional text the user needs to reference when completing a field. This was always our intent but I've just re-read our guidelines are we are not very clear on this topic and we will re-visit the content to make it clearer.

Thanks for the feedback.

[marijohannessen]

Closing this issue due to lack of response from issue creator. Please feel free to re-open if needed.