Input placeholder text must have a sufficient color contrast ratio

[afercia]

In 44c9c20 (see #1302 / #1439) the placeholder text color was changed to have a sufficient color contrast ratio to meet the WCAG level AA requirement.

It used the color $dark-gray-300: #6c7781 which is the lightest gray in the colors palette that can be used against a white background to meet the WCAG requirement.

Following changes, see for example af65418 in #6406 and 0addd84 in #6937 have modified the placeholder color; it now uses also some alpha transparency and it's rgba(34, 52, 67, 0.5).

The resulting color contrast ratio against a white background is a very low 2.86:1. It must be at least 4.5:1. See https://jdlsn.com/color/?type=rgb&color=34,52,67&color2=255,255,255&alpha=0.5

I'm a bit surprised these changes have been made without any mention to accessibility or without properly labelling the related issues and PRs, as the first color change to #6c7781 was specifically made, and agreed, to address an accessibility issue.

Regardless, these colors must be changed to whatever color is desired, as long as the resulting contrast ratio is 4.5:1.

Worth also noting this is what core does, and Gutenberg shouldn't deviate from accessibility best practices that have been established in core. See https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css?rev=43309&marks=226-237#L225

/Cc @jasmussen

[afercia]

To clarify, this is not about the RichText component fake "placeholder" which should be reviewed separately (it doesn't have a sufficient color contrast as well).

Instead, it's about real HTML placeholder attributes used for real input or textarea elements. Some blocks use standard input elements and custom blocks may use them as well. In these cases, the placeholder color is too light:

embed:

shortcode:

custom block:

Worth noting this is also inconsistent because other input fields outside of the block list use the placeholder color inherited from core forms.css which is #72777c (with a good color contrast). See for example the inserter search field or some fields in the sidebar:

I'd also like to remind that checking color contrast in Chrome is very easy. Also placeholder can be checked, revealing in the inspector the shadow DOM. Added bonus: the Chrome color checker takes into account also alpha transparency: