The text highlight color is indistinguishable from background color in some cases

[ZebulanStanphill]

The issue

The text highlight/selection color is always the same and does not adjust to account for situations where the background behind the selection is similar or the same to the highlight/selection color.

How to reproduce

1. Insert a Paragraph block.
2. Highlight some text.
3. Try setting the background color of the Paragraph block to the same one as the text highlight color.
4. Notice that the text highlight color does not change to remain visible in a similarly-colored background.

Expected behavior

The text highlight/selection color should adjust to the background of what it is selecting.

Screenshot

In this screenshot, I have highlighted a small portion of the text, but it is rather hard to tell where it is since the text highlight color is only slightly different from the background color of the Paragraph block.

[designsimply]

Try setting the background color of the Paragraph block to the same one as the text highlight color.

I tested using Firefox 61 on Mac and this seems like a very edge case to me because I consider it rare that someone would set the text background color to a very similar background color as the highlight text with the expectation of the highlight text color changing in that case and also because it takes some work and the use of the manual color selector to do it. Do you agree? If the issue is more important for a reason I haven't thought of, such as accessibility, could you let me know? I'm asking to help assess priority because as we move toward the 5.0 release, the main goal will be to focus on moving high impact / high visibility issues up in priority while also labeling valid, low priority issues clearly. ❤️

Video: 1m33s
^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13995&action=edit running WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

[ZebulanStanphill]

I am not aware of any major accessibility issues; I just opened this issue in case there was one.

[thehenrybyrd]

Another report of this, as I was doing some basic testing today with @pauljacobson.
We tested in Chrome, Firefox, and Safari.

In Chrome, if a block has a background of pale cyan blue, selected text can’t be seen. It is being selected properly, as we can apply styles.

Chrome:

It’s fine in Firefox:

However, if you use #B5E2F8 as the background in Firefox, the highlight becomes really hard to see.
We couldn’t find the exact highlight color for Firefox, but got fairly close.

In Safari it’s also problematic. I can see a very slight highlight with this background, but it’s so slight it’s hard to tell if it’s imagined.

Safari:

To sum up, if the background color is the same color as the default highlight color in a browser, highlighting can’t be seen.

This could be solved by choosing a different default “light blue” color in the Gutenberg block default color choices (Block Settings > Background Color), to avoid the issue in Chrome and Safari. The current default is #8ED1FC.

Alternatively, perhaps there’s a way to make sure highlighting is differentiated regardless of the background color. This sounds more complex as it's so browser-dependent.

@designsimply My instinct leading up to 5.0 is that this issue is valid, but low priority. If we could get a different "light blue" in the default color palette, people would be less likely to run into the issue.
Otherwise, it's likely to confuse a few folks using Chrome or Safari. If changing the default color choices is a quick fix, that may be worth it.

Browser Details:
OS: macOS 10.12.6
Browser: Chrome (67.0.3396.99) and Safari (11.1.2)

OS: macOS 10.13.6
Browser: Firefox 62.0b10 (Developer Edition)

Seen on Gutenberg v3.3.0 and on WordPress.com.

[ZebulanStanphill]

The block editor is now using the native highlight color, so this is no longer an issue that should be fixed at Gutenberg's level, but rather one to be addressed by the browser/OS. Because of that, I'm closing this issue.