Web-stories-wp: Prepublish checklist is missing a text contrast check

[bmattb]

Bug Description

In this page, I don’t get any text contrast issues in the checklist even though you can’t read the text. (there’s black text on top of the gray at the top left)

source - https://stories-new-wordpress-amp.pantheonsite.io/wp-admin/post.php?action=edit&post=13581#page=%25225c4f2f9d-21ea-4ffa-a45d-f0707fa3da0f%2522

Funny enough, this triggers the text contrast check issue. So it seems that we are only checking within a specific element, not an element on top of another element, but not sure this merits the low contrast error.

source - https://stories-new-wordpress-amp.pantheonsite.io/wp-admin/post.php?action=edit&post=13581#page=%25226357900a-5dca-42db-be57-01e066ca78f3%2522

Expected Behaviour

Error message should be presented in this case

Steps to Reproduce

Screenshots

Additional Context

• Plugin Version:
• Operating System:
• Browser:

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

Implementation Brief

[o-fernandez]

@carlos-kelly @choumx seems that we only do a contrast check today in a specific element, but don't check contrast between a text element and the section of the background that the text sits on. I wasn't expecting that, since I think most text contrast issues will be with text and their background, not text and the fill color. Can we look into this? It's OK if this is an enhancement we do post MVP.

But, we probably want to remove the current check for the release as I don't think it's working that well.

So...

• P0/P1: disable the text contrast check until improved (this ticket)
• P2: improve the text contrast check to check against bg as well. (covered by #5383)

[swissspidy]

seems that we only do a contrast check today in a specific element, but don't check contrast between a text element and the section of the background that the text sits on. I wasn't expecting that, since I think most text contrast issues will be with text and their background, not text and the fill color.

AFAIK this is on purpose, at least according to the various Slack discussions about this. So the current implementation only checks text color against fill color, nothing else, as it was deemed too complex

[carlos-kelly]

@o-fernandez Pascal is correct. We have experimented with a couple ways to do a canvas render to actually do a contrast test but this will likely need to be an effort in its own right to build in the foundation.

[choumx]

P0/P1: disable the text contrast check until improved (this ticket)

+1. Shouldn't bother checking text contrast without background image support.

[o-fernandez]

P0/P1: disable the text contrast check until improved (this ticket)

+1. Shouldn't bother checking text contrast without background image support.

Filed #5525 for this since it doesn't seem there was a ticket for it specifically. Will keep this ticket around for the P1+ of improving the text contrast check inc. bg.

[swissspidy]

P2: improve the text contrast check to check against bg as well.

The scope for that is not 100% clear to me here.

@o-fernandez @choumx Looking at #5568, could you perhaps clarify if we want to simply check the text element against the page background image, neglecting the fact that there could be any number of elements in-between? To me that doesn't sound like a huge improvement over not having any checks at all. I thought we'd want to take the whole background into account here, including e.g. shapes behind a text element.

[o-fernandez]

P2: improve the text contrast check to check against bg as well.

The scope for that is not 100% clear to me here.

@o-fernandez @choumx Looking at #5568, could you perhaps clarify if we want to simply check the text element against the page background image, neglecting the fact that there could be any number of elements in-between? To me that doesn't sound like a huge improvement over not having any checks at all. I thought we'd want to take the whole background into account here, including e.g. shapes behind a text element.

Yes, to me check against bg means that we check holistically vs. anything affecting the colors around the text, not just the bg image. If there's a shape behind the text and the bg image doesn't impact text contrast, then it makes sense to account for the shape.

A better way to rephrase this may be -- text contrast should check the text color vs. the text surrounding color, be it a bg image colors, text fill/highlight color, shapes colors, etc.

[swissspidy]

Makes sense. Then I think this definitely needs a technical design doc/brief to establish a proper architecture.

[embarks]

@swissspidy @choumx Here's my draft for a technical explainer for the current solution.

I have some pieces left to write, such as what I learned about rotating image layers, etc. and some more charts so it's not so dense. I just wanted to get my thoughts down before the weekend. :)