Styles editor should show color contrast failures.

[joedolson]

What problem does this address?

When modifying text and background colors in the post editor, low contrast color combinations trigger a color contrast warning. This does not occur in the style editor, though the global nature of these style changes are a much more significant accessibility issue than case-specific contrast failures.

What is your proposed solution?

The color contrast checker should be extended to the global styles editing experience, the Stylebook, etc.

@annezazu

[annezazu]

Calling on a crew to dive in and adding to the 6.2 board @tellthemachines @apeatling @andrewserong.

[andrewserong]

Oh, this is an interesting one. Currently the ContrastChecker component only appears to be rendered within the color panel used in the block editor. There are some places where it could be tricky to introduce it (such as the style book) as it might not be very easy to determine which blocks result in poor color contrast.

However, in terms of introducing color contrast checking in global styles, probably a good place for us to start would be to look at the Colors screen. Since that screen is already looking up the global background and text colors, perhaps that could be a good initial place to introduce a color contrast warning?

Next steps could then be to introduce it to the Text, Background, and Heading color screens (where each screen would then need to do a lookup for the other color property for the contrast check — e.g. Text looks up Background, Heading looks up Background, Background looks up Text, etc)

screen-colors.js	screen-text-color.js	screen-background-color.js

If no-one beats me to it, I'll have a go at seeing how hard it'll be to introduce the color checker in those places, as I think that might get us a good part of the way there.

[andrewserong]

I've had a go at adding in the ContrastChecker to the Background, Text, Links, and Colors screens in global styles, just for the root-level (not block-level) color screens. Happy for any feedback over in #48115

[andrewserong]

After having a go at using the existing ContrastChecker component for global styles over in #48115, the experiment revealed a few challenges that will likely require some design work before making another attempt:

• The ContrastChecker looks at multiple dimensions of color contrast, and it's difficult to provide a suggestion at one screen (E.g. Background Color) that helpfully nudges the user as to what to change next, when the thing to change might be on another screen, e.g. Text or Link color. With the current component, in the experiment, each idea tried seemed to be more confusing for the user than having no message at all.
• Feedback indicated that the parent Colors screen might be a more useful place to show the relationship between the different colors in use across the site. One potential direction was raised in this comment.(https://github.com/WordPress/gutenberg/pull/48115#issuecomment-1434425948). Ideally, the messaging at this parent level should make it clear to the user which thing they need to address in order to restore good contrast in their site design.
• The existing ContrastChecker component isn't flexible enough for the messaging / display requirements in the global styles screens. Before making another attempt, it might be worthwhile to refactor the component a little to extract the contrast checking logic into a hook. Then, perhaps global styles could use the hook to get the value of the contrast checker, and then use that value to flag within the UI which color values need changing.

In short, I think we need two steps to proceed:

1. Design work to figure out the right messaging / display of contrast issues in global styles colors screens
2. Extract contrast checking logic into a hook, so that custom messaging/display can be created within global styles

For more detail on the issues encountered in the first exploration, see this comment and screengrab: https://github.com/WordPress/gutenberg/pull/48115#issuecomment-1436285411

I'll add the Needs Design label.

[ndiego]

Given that WordPress 6.3 Beta 1 is tomorrow and there has been no action on this issue, I am going to remove it from the 6.3 Project Board.