New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Captions "placeholders" color contrast too low #5838

Closed
afercia opened this Issue Mar 28, 2018 · 15 comments

Comments

Projects
None yet
7 participants
@afercia
Contributor

afercia commented Mar 28, 2018

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:

screen shot 2018-03-28 at 12 10 45

Gallery:

screen shot 2018-03-28 at 12 11 10

Cover Image:

screen shot 2018-03-28 at 12 15 20

@karmatosed

This comment has been minimized.

Member

karmatosed commented Mar 29, 2018

What would you be suggesting we raise it to?

@afercia

This comment has been minimized.

Contributor

afercia commented Mar 29, 2018

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

This comment has been minimized.

Member

rianrietveld commented Jun 12, 2018

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

This comment has been minimized.

Contributor

afercia commented Jun 21, 2018

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:

screen shot 2018-06-21 at 11 35 50

@afercia

This comment has been minimized.

Contributor

afercia commented Jun 21, 2018

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:

screen shot 2018-06-21 at 11 59 29

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.

screen shot 2018-06-21 at 11 35 50

@karmatosed

This comment has been minimized.

Member

karmatosed commented Jul 11, 2018

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

This comment has been minimized.

Contributor

afercia commented Jul 11, 2018

@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

This comment has been minimized.

Member

karmatosed commented Jul 15, 2018

Is this just about removing opacity then?

@bemdesign-er

This comment has been minimized.

bemdesign-er commented Jul 25, 2018

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

This comment has been minimized.

bemdesign-er commented Jul 25, 2018

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

This comment has been minimized.

Member

karmatosed commented Jul 25, 2018

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

@bemdesign-er

This comment has been minimized.

bemdesign-er commented Jul 30, 2018

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.

@kjellr kjellr referenced this issue Jul 30, 2018

Closed

Block audit: Gallery #8305

1 of 12 tasks complete
@bemdesign-er

This comment has been minimized.

bemdesign-er commented Jul 31, 2018

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

@afercia

This comment has been minimized.

Contributor

afercia commented Sep 10, 2018

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

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Oct 8, 2018

This has been fixed in a recent commit:

screen shot 2018-10-08 at 08 09 08

screen shot 2018-10-08 at 08 09 24

screen shot 2018-10-08 at 08 09 50

In all these cases the opacity is .8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment