Captions "placeholders" color contrast too low

[afercia]

The text used as "placeholder" for captions is set to have an opacity: 0.5 CSS property that makes the contrast ratio too low on any background, whether the background is a color or an image. Worth reminding color contrast ratio for text must be at least 4.5:1 for WCAG level AA.

Some examples:

Image:

Gallery:

Cover Image:

[karmatosed]

What would you be suggesting we raise it to?

[afercia]

The cover image is a problem, as the actual background is the image and we can't predict if the image will be "dark" or "light". I'd consider a solid background in the caption field, maybe that disappears when typing? Not sure.

About the other fields, seems to me they have a background solid color, so they should use a black or white text color that has a minimum 4.5:1 contrast ratio, with no opacity.

[rianrietveld]

Not sure it this is something we should solve within the editor, as this is mainly in the hands of the content manager & theme designer.

[afercia]

Hm no this is not about the text entered by authors, it's the default placeholder text displayed by Gutenberg. A similar problem happens with the placeholder text in the paragraphs: "Add text or type / to add content". The opacity 0.5 just makes the color way too light to have a good contrast:

[afercia]

Going to change the issue title to expand it also to paragraphs and other blocks, as it's not just about images or galleries. I see galleries and cover image have improved contrast now:

The issue still persist for other placeholders though. The paragraph one, for example, inherits its color from WordPress #444444 and has a 0.5 opacity on a white background. This results, more or less, in a perceived gray #a2a2a2 which gives a contrast ratio of just 2.55:1.

[karmatosed]

Can you provide a grey that you feel fits the a11y guidelines @afercia? I would happily mockup something but I want to make sure I'm on right track for you.

[afercia]

@karmatosed well it's not about what I feel 🙂This is not subjective. There are established requirements to meet and tools to measure color luminosity contrast. What I can say is that in WordPress core we're using #72777c as the lighter gray that can be used against a white background. That gives a contrast of 4.52:1 which is slightly above the required 4.5:1. See https://jdlsn.com/color/?type=hex&color=FFFFFF&color2=72777c

Gutenberg introduces a new color palette, which is inconsistent with the current palette used in core. As I see it, this is an issue that should be discussed before merge. Consistency is key, the project should be considered as a whole, not as Gutenberg was something "separated" from WordPress. Consistency should be increased, not decreased. Especially after all the work done in core to reduce the amount of different color shades in use.

That said, the color palette in Gutenberg is stored in edit-post/assets/stylesheets/_colors.scss. Among those grays, the lighter one that can be used is #6c7781 which gives a contrast of 4.57:1. See https://jdlsn.com/color/?type=hex&color=FFFFFF&color2=6c7781

How to get to that color with the current opacity property, that I don't know. Which is why I'd advise against using opacity in the first place.

[karmatosed]

Is this just about removing opacity then?

[bemdesign-er]

Removing opacity would definitely simplify things. Or if opacity is useful from a visual design perspective, we can try and find a darker gray and reducing the level of opacity to get something close to the design color palette's grays as far as perceived color. For example #4e4e4e at 65% opacity gets one close to #ccc in perceived color.

[bemdesign-er]

In playing around with this a bit more... #2c2c2c at 65% opacity gets a good contrast ratio (4.54:1), thus meeting WCAG standards and has a perceived color of #767676. It doesn't look out of place either (tested in browser tools on .wp-block-image figcaption) and might be worth trying out.

[karmatosed]

@bemdesign-er could you upload a screenshot to show what you are suggesting?

[bemdesign-er]

Heh... corporate firewall won't let me upload screenshots so this textual description will have to do for now:

Using the cover image block. After user adds image, the text input with placeholder text appears over the image. Currently this is white text (#fff) at .5 opacity. This is not great for accessibility and visual contrast reasons. I propose that the placeholder text be given a dark background to provide adequate contrast for accessibility reasons and it could be something like this:

[component type] .editor-rich-text__tinymce+.editor-rich-text__tinymce {
opacity: .65;
pointer-events: none;
background: #222;
}

.75 opacity would be even better contrast but may be a bit much for the design, particularly as .5 opacity looks like it's used elsewhere.

[bemdesign-er]

Here's a screenshot of how a possible solution might look with the placeholder text having a background color:

[afercia]

Still a problem on current master 3.8.0-rc.1.

[jasmussen]

This has been fixed in a recent commit:

In all these cases the opacity is .8.