Contrast checker for pseudo-state colors

[juanfra]

Description

#76491 added support for styling blocks per interactive pseudo-state, which is amazing! Custom colors can be assigned for :hover, :focus, :focus-visible, and :active on blocks that support it (for example, the button block)/

However, the contrast checker is not triggered when picking colors for those states, so accessibility issues can be introduced silently without the site admin being notified.

Proposed solution

The contrast checker should run on all pseudo-state color panels, taking into account any colors inherited from the default state when the pseudo-state doesn't define them explicitly. The checker should also avoid showing false warnings when the user physically hovers the block in the canvas while editing the default state.

Steps to reproduce

1. Add a Button block
2. In the block inspector, switch to the :hover state
3. Change the background color to a light color (e.g. Use light yellow or light pink on TT5)
4. Leave the text color unset (so that it inherits white)
5. No contrast warning is being displayed.
6. Change the text color to different colors that would generate a contrast warning (e.g. the same color as the background), and confirm that the contrast warning is still not displayed.

[talldan]

Thanks for reporting, I've added this to the tracking issue - #77817.