Lighten the color of Placeholder text in Basis Theme

[philsward]

Description of the need

The color for placeholder text is too close in color to the theme text, making it difficult to understand: "There's nothing actually in this box".

The UX is confusing when looking at it and confusing when clicking on it (because placeholder text doesn't disappear until you start typing).

This could potentially result in people clicking the input form trying to delete the text when there isn't anything to actually delete.

Steps to reproduce

1. Edit the default layout (admin/structure/layouts/manage/default)
2. Add a search form block
3. add some placeholder text
4. add the block
5. save the layout
6. view any page using the default layout (node/1 for example) to see the search box

Proposed solution

Lightening the color will provide contrast between the theme text and placeholder text, which in theory will aid with indicators that the text inside the input form isn't actually text that must be deleted.

The proposed color is something closer to HEX: #999999

Alternatives that have been considered

Not using placeholders...

Files to edit

• core/themes/basis/css/skin.css ~line 628
• core/themes/seven/css/style.css ~line 1084

Additional information

Examples:

Current:

Proposed:

[indigoxela]

Please also consider web accessibility. From your screenshot I'd assume that the contrast is too low.

[olafgrabienski]

Please also consider web accessibility.

I guess the current color used for placeholders in Basis is around #757575, which has a contrast ratio of 4.6:1. According to MDN Web docs the minimum ratio (AA rating) is 4.5:1.

Seems we can't lighten the text without creating an accessability issue. I'm wondering if there's any approach which meets both:

• enough contrast between different text states for better understanding
• enough contrast between background and text for legibility

[philsward]

@olafgrabienski is that contrast ratio specific to placeholders or just a specific ratio recommend for general site viewing?

The point of placeholders yes is to give an example, but more importantly, it needs to be shown that it is ghost text, or text that isn't really there.

Maybe a different color?

I didn't play with it (just now thought about it), but one idea is to blank the placeholder when the input form has focus. This would honestly be a better UX all the way around.

[olafgrabienski]

@philsward It's a recommendation for "readable interfaces" in general.

[klonos]

@philsward Drupal/Backdrop core does not offer a way to add placeholder text to fields OOTB. You either need to port and use a contrib module, or add the placeholder attribute via a custom module/theme (that perhaps converts the help text into a placeholder). How are you achieving that?

The UX is confusing when looking at it and confusing when clicking on it (because placeholder text doesn't disappear until you start typing).

I see how that may be an issue, but there are solutions available, that can be implemented on the theme level. Seehttps://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery for example, where this is being suggested in order to hide the placeholder text on focus instead of when you start typing:

input:focus::placeholder {
  color: transparent;
}

[philsward]

@klonos I agree this can be fixed at the theme level, I just don't want to have to fix it for every site and override that theme for every site where it is used, then have to maintain the code base every time basis is updated.

This isn't a personal preference tweak, this is a poor UX tweak.

[philsward]

List of other selectors for various browsers:

https://stackoverflow.com/questions/13183421/how-to-change-placeholder-color-on-focus

The CSS you mentioned @klonos

input:focus::placeholder {
  color: transparent;
}

This worked great on a Seven theme override I needed and it gives the UX a feel that is lot more natural. Hope to see this gain some traction for the Basis theme so modules like webform which use placeholders can benefit from it.

[klonos]

Backdrop core does not offer a way to add placeholder text to fields OOTB....

@jenlampton pointed out that the search field on our search block can be configured to have a placeholder text:

Another place where we use placeholder text (although it may not be subject to theme colors) is the search field in the admin bar.

[docwilmot]

Also, Backdrop allows placeholders via FormAPI: https://docs.backdropcms.org/form_api#placeholder

[philsward]

Should I rename the title to reflect blanking the placeholder? I'm still a fan of making the color slightly lighter (not much) but I think the overall better UX is to blank the form field on focus.

[klonos]

@philsward I think that you have better chances with the blank-on-focus approach, unless you can specify a color that at the same time satisfies both of these conditions:

1. is "light enough" (to denote that it is not the actual text, but rather a placeholder)
2. is at least WCAG 2 level AA conformant (you can use https://webaim.org/resources/contrastchecker for example). If we choose anything less than that just because it is aesthetically pleasing, then I'm afraid that someone will at some point raise an accessibility issue, and that color will be changed again.