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,