Bootstrap: Placeholder is visually indistinguishable from normal text

[vanillajonathan]

The placeholder is almost visually indistinguishable from normal text input.
This is confusing and dangerous. The placeholder text ought to be brighter/dimmer.

This was fine in v4.0.0-alpha.5 but is a regression in v4.0.0-alpha.6.
The color is defined by the $input-color-placeholder variable in /scss/_variables.scss.
From alpha5 to alpha6 it was changed from #999 to $gray-light.

Screenshot

[mdo]

Closing per https://github.com/twbs/bootstrap/pull/21782#issuecomment-274284975.

[vanillajonathan]

So is any fix planned for this issue?

Until then, I have the following code in a CSS file that I load after Bootstrap.

/* Temporary code to workaround a regression in Bootstap 4.0alpha6,
    remove this code when Bootstrap is updated with a new release. */
.form-control::-webkit-input-placeholder {
  color: #999;
}

.form-control::-moz-placeholder {
  color: #999;
}

.form-control:-ms-input-placeholder {
  color: #999;
}

.form-control::placeholder {
  color: #999;
}

[jonathanhefner]

I agree the appearance is too indistinct. What about defaulting to italics to distinguish placeholder text?

[vanillajonathan]

@jonathanhefner, italics is unconventional. The de facto standard is dimmer text. So best would be what is common and expected to avoid confusion.

[patrickhlauke]

Placeholder text is one of those things that can cause different accessibility problems for different user groups, and trying to fix it for one group will lead to problems for other groups.

Color contrast is of course one of these: you'd want the contrast to be strong enough to be legible, but also you'd want the difference between placeholder text and actual user-entered value text to be different enough to make it clearly distinguishable.

Placeholder text that appears too "prominent" (e.g. using a dark-enough text colour) can easily be mistaken for actually entered text, which would confuse certain users.

And of course, placeholder text should never be used as the only way to provide a "label" or additional hints to users (specifically because after user entry, it disappears).

If there are visible labels already, and any hint text is provided as additional text after/near the input (and correctly associated with the input with aria-describedby for instance), then placeholder serves a purely aesthetic purpose...and in those situations, having color contrast that is below the 4.5:1 threshold is quite acceptable I'd say (i'd still aim to stay above 3:1)

[vanillajonathan]

Still insufficient contrast in Bootstrap 4.1.3.

It is now $gray-600 which is #6c757d.

[vanillajonathan]

I do believe this ought to be revisited and reconsidered.

I think Bootstrap should just take the decision not to set any placeholder color.
Or use the value of #767676 which is the default unstyled used by Firefox on Windows when the placeholder color is not set.
Or use the value of #757575 which is the default unstyled used by Chrome on Windows.

The Bootstrap color of #6c757d is darker than usual. It is darker than expected. It is darker than what users are accustomed to. It causes confusion.

#999999 (Bootstrap 4.0.0-alpha.5) have a contrast ratio of 2.85:1 and fails ❌ WCAG AA. source
#6c757d (Bootstrap 4) have a contrast ratio of 4.69:1 and passes ✔️ WCAG AA. source
#757575 (Chrome) have a contrast ratio of 4.61:1 and passes ✔️ WCAG AA. source
#767676 (Firefox) have a contrast ratio of 4.54:1 and passes ✔️ WCAG AA. source

[patrickhlauke]

in terms of perceived contrast/lightness, i'd say that the difference between the current #6c757d and the default unstyled browser defaults in Chrome/Firefox are pretty much imperceptible. so it's not far off from what "users are accustomed to"

going up to #9b9ca2 would be too extreme a jump into illegible contrast. it would be excusable if the placeholder text is only used in a very ancilliary way (if there's already clear-enough label text, and it's really not providing much additional/essential information), but as we can't guess how it will be used, i'd rather stick with a default that ensures they're readable enough.

this is, again, one of those cases where you can't really please everybody / make a generalised call. authors are free to customise/override this to their particular need.

the wider answer is: placeholder text is mostly pointless and shouldn't be relied on or used...

[vanillajonathan]

How about just not overriding the browser's defaults or using the same value as the browser's defaults?
That way, its neither better nor worse than the browser's default.