Description

Some blocks display a placeholder text.

• For blocks that use the RichText component, it's a CSS generated content.
• For blocks that use an input element, it's the HTML placeholder attribute.

In all cases, the placeholder text must meet the color contrast ratio requirement of 4.5:1. It is part of the user interface so that the editor must make sure it is readable for everyone.

Turns out the color of the text placeholder may inherit from the active theme.
For the RichText, the editor CSS sets a CSS opacity: .62; regardless.

Setting that opacity doesn't seem to be ideal. When the active theme uses a light color, the opacity set by the editor may bring the contrast ratio below the required threshold. This is the case with Twenty Twenty-Four, for example.

Iin the screenshot below, I'm comparing some block text placeholder in the editor. On the left, with Twenty Twenty-Three active and on the right with Twenty Twenty-Four active.

Observe the color of some of the placeholders actually changes depending on the theme and it has insufficient contrast.

Step-by-step reproduction instructions

• Create a post.
• Add some blocks that have text placeholders, for example:
  • Image (for the caption placeholder)
  • Gallery (for the gallery caption placeholder)
  • Site tagline
  • Site title
  • More
  • Read more
• Empty any default content from the inputs, to reveal the placeholder text.
• Observe all the placehholder text with different themes active e.g. with Twenty Twenty-Three and with Twenty Twenty-Four.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes