Description

This is a replica of the following issue reported here:

Automattic/wp-calypso#86467

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.

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.

Potentially relevant: Automattic/wp-calypso#86082

Step-by-step reproduction instructions

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.

Screenshots, screen recording, code snippet

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

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure