Components: Apply consistent placeholder color

[t-hamano]

Found this while researching #56388

What problem does this address?

The placeholder color of form elements changes depending on the component and whether or not WordPress form styles have been applied.

Inputcontrol

This component does not have an explicit placeholder color applied to it, so the placeholder color changes depending on the browser type or whether WordPress form styles are applied.

When this component is present in WordPress, form styles are applied (#646970), so that it has a contrast ratio of 5.53:1 against a white background:

https://webaim.org/resources/contrastchecker/?fcolor=646970&bcolor=FFFFFF

On the other hand, if WordPress form styles are not applied, the browser default styles will be applied. In Chrome, the placeholder color is #757575, so the contrast ratio is 4.6:1:

https://webaim.org/resources/contrastchecker/?fcolor=757575&bcolor=FFFFFF

SearchControl

This component has a light gray background color (#f0f0f0).

When WordPress form styles are applied: The contrast ratio is 4.85:1:

https://webaim.org/resources/contrastchecker/?fcolor=646970&bcolor=F0F0F0

When WordPress form styles are not applied: The contrast ratio is 4.04:1:

https://webaim.org/resources/contrastchecker/?fcolor=757575&bcolor=F0F0F0

TextControl

This component uses the input-control mixin. This mixin applies the #1e1e1e9e color and has a contrast ratio of 4.67:1:

What is your proposed solution?

• Placeholder color should be defined at the component level.
• I think removing the background color of the SearchControl component should be discussed as part of #56388, but at the very least, it should meet a contrast ratio of 4.5.1.