Colour contrast checker fails on nested blocks

[ChemicalSailor]

If a background colour is set on a parent block (e.g Media & Text) and then a text colour set on a child block (e.g a paragraph) resulting in poor contrast a warning is not shown.

Equally setting a background colour on a parent block does not show a poor contrast warning if a child block without it's own colour settings (e.g. a heading block) results in poor contrast.

I understand this is an issue to do with a paragraph having a transparent background making it impossible to compute a contrast. In this thread (#5658 (comment)) it was suggested it might be possible to recurse through blocks, but it wasn't pursued at the time; maybe it's time to revisit? I think this could at least work in the case where a background is set on a parent block, and the check recurses down through child blocks checking the text colour.

[noisysocks]

Related: #14687

Can confirm this is a bug:

1. Insert a Group block
2. Set an e.g. dark background colour on the Group block
3. Insert a Paragraph block into the Group block
4. Set an e.g. dark text colour on the Paragraph block
5. There's no contrast warning, even though the text is not readable

We probably need to make the colour contrast checker smart enough to know what the background colour is when no explicit Background Colour setting is set. It’s either going to be the background colour of the parent block or the background colour of the post. We could maybe look at using React Context for this.

[glendaviesnz]

The recent changes to the Group colour options seem to have fixed this in the group context at least:

[megphillips91]

The cover block is too opinionated - particularly where it then contains buttons > button. Because it changes the color to #fff which is not accessible for lightly colored backgrounds.

I propose that trying to 'force' the contrast is too opinionated. This should be left to the user to decide. Imagine the common design pattern of having a buttons block with a higher priority button and a lower priority button in the same block...one is likely lightly colored background and the other is dark...but the a:visited property is set to #fff which cannot be easily changed by either the user or the theme developer.

[paaljoachim]

Using WordPress 5.7 beta 3.
Twenty Twenty One.
Chrome

It looks like it is working correctly.
Group block has a black background.
Paragraph block has a dark grey text color. See the contrast checker warning.

I will go ahead and close this issue.
It can of course be reopened if I made a mistake.