Inaccurate error messaging with block-level colors when 'Use theme styles' is off

[SiobhyB]

Quick summary

When 'Use theme styles' is toggled off in the editor's settings, applying different colours at a block-level can lead to inaccurate, misleading error messages via the colour contrast checker and an overall confusing experience.

As expanded upon in the Logs or notes section, I have only been able to reproduce this within Calypso. In /wp-admin for self-hosted sites, the contrast checker appears to be disabled all together when 'Use theme styles' is toggled off.

Steps to reproduce

Setup: Enable a theme with a dark background and deactivate editor's theme styles

1. Active a block-based theme with a dark background on your site. For example, the Charcoal variation of the Byrne theme.
2. Navigate to the post editor for the site in Calypso.
3. Observe how, by default, the editor reflects the theme's colour scheme, with a dark background.
4. Tap the three dots to the upper right of the editor and then access Preferences.
5. From the resulting modal, navigate to Appearance and then toggle the Use theme styles option off.
6. Return to the editor to observe that the editor no longer represents the theme styles and has a light background.

Experiment with light text

1. Add a new paragraph block and navigate to the block's colour settings in the sidebar.
2. Select a light colour and begin typing.
3. Notice that the colour appears illegible in the editor, and the following warning is provided:

This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.

4. Save changes and preview the post.
5. Observe that the text is actually legible.

Experiment with dark text

1. Add a new paragraph block and navigate to the block's colour settings in the sidebar.
2. Select a dark colour and begin typing.
3. Notice that the colour appears legible in the sidebar, and no contrast warning is provided.
4. Save changes and preview the post.
5. Observe that the text is not actually legible.

What you expected to happen

I expected the in-editor contrast warnings to be accurate and for any content included in the post to be legible on the site's font-end.

What actually happened

In-editor contrast warnings are incredibly misleading as they appear to use the editor's styles as the point of reference, rather than the actual site's background.

In-editor contrast warning, despite text being legible on front-end

Editor	Front-end

No in-editor contrast warning, leading to illegible text (partially highlighted with cursor for the sake of the screenshot)

Editor	Front-end

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

I was only able to reproduce the misleading error messaging within Calypso, not on a self-hosted site.

The below are screenshots contrast Calypso (testing using a simple site) vs. /wp-admin (testing using a self-hosted site without Jetpack connected). In both cases, Twenty Twenty-Four was enabled on the site, with its "Onyx" style applied (a dark-coloured background). With the default editor styles, a misleading contrast error is only shown on Calypso.

Calypso w/simple site	/wp-admin w/self-hosted site

Potentially relevant: #86082

[JanaganSaravanan]

Hi! @SiobhyB I would like to work on this issue as my first contribution to wp-calypso. I have already set up wp-calypso locally. But I need help logging in in web. Any suggestion where i can find demo log in details. Thanks,

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Simple - Could Not Replicate
• Tested on Atomic – Could Not Replicate

##Message to author##
Thanks so much for the detailed report @SiobhyB I tried this on a couple of themes including Charcoal but couldn't get the warning message to appear at all with any color combination.
Any chance you can record a video capture of setting this whole thing up so we can replicate the exact steps?

[SiobhyB]

@rickmgithub, re-opening as this is a valid issue.

I tried this on a couple of themes including Charcoal

Charcoal is not a block-based theme, which is why you couldn't reproduce there. The example I provided is the Charcoal variation of the Byrne theme.

Any chance you can record a video capture of setting this whole thing up so we can replicate the exact steps?

I've captured a video here. You'll see that I start at the site editor, where I ensure a style variation that uses a dark background is selected, I think that's key. Then, I follow the rest of the steps set out in the issue's description.

DEMO.mov

[SiobhyB]

Hi! @SiobhyB I would like to work on this issue as my first contribution to wp-calypso. I have already set up wp-calypso locally. But I need help logging in in web. Any suggestion where i can find demo log in details.

@JanaganSaravanan, that's great, thank you for looking into contributing! If you have wp-calypso set up locally, you should be able to log in using any valid WordPress.com credentials. In case you're not aware, too, we also have some issues labelled as "Good First Issue" here in the repository. You can also follow this advice for creating issues to ask more questions from the team. Best of luck!

[JanaganSaravanan]

That's really useful. Looking forward to make contributions to wp-calypso. Thank you,

[inaikem]

@Automattic/dotcom-product-ambassadors 👋 Please re-triage this, testing on WPcom and Self-hosted sites. Let me know when you're done and I'll help you get it allocated for product team review!

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on self-hosted – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
- With the "Use theme styles" turned off the results were:

1. The warning came up for the light text, but it seemed to be in the context of the editor and not the theme.
2. The warning didn't show up for the dark text, so it seemed to"think" it'll be ok in the frontend.

- With the "Use theme styles" turned on the results were:

1. The warning came up for the dark text, so it works as expected.
2. The warning didn't come up for the lighter color text, so that worked as expected.

📌 ACTIONS

• Triaged
• From my own perspective, I'd like to think that the "Use them styles" feature basically is interpreted as "use the default editor styling instead", but doesn't actually apply for the frontend, so I'm not sure I see the use of this feature unless we can adjust the behavior to work as in the second case.

Before I consider it raising it to core, does anyone know how this should work?

cc @annezazu if you know more

[annezazu]

Can you replicate this on a self hosted site? The original issues described cannot be replicated on a self hosted site and I don’t see that test case on your report. I don’t see why this would be raised with Core as a result since it appears calypso specific. What am I missing?

In terms of how this should work, it basically allows you a closer preview to what your theme will show by using the styles provided by the theme when writing. You can also turn this off if you want a more default view.

[Robertght]

Apologies! It seems my copy-pasta skills are getting worse. I corrected my answer above and I can confirm it's the same behavior on self-hosted.

[annezazu]

Sweet thanks for confirming. Digging into this, I couldn't find a relevant GitHub issues in the Gutenberg repo, including when looking through closed items. In this case, it has to do with the Contrast Checker aspect of the code. What seems to be happening is that it's determining contrast based on what is on the page vs site level styling. When you turn off the theme styles, this prevents those styles from rendering and from the Contrast Checker taking that information into consideration. I think it's worth a Core issue! Are you game to open? Happy to if not :)

[jordesign]

Pinging @Robertght for the need for an upstream GB issues - and moving this out of the One board.

[Robertght]

Looks like this is something I missed through the loads of pings.

I reported it here: WordPress/gutenberg#68887