I am having an issue with the Gmail app for iOS inverting the color of text on a background image without checking the contrast. I used the Campaign Monitor bulletproof background image code, which renders beautifully across devices, in light mode. The background image is dark with white text over it. In the Gmail app, the text is inverted to black, which becomes illegible over the dark image. Does anyone know how to disable Dark Mode/color invert in Gmail or a way to keep the text light over the dark image?

Image from iOS (1)

Below is the code I'm using. I have an outer table with the background image applied to the td, with a nested table holding all the content.

<table role="presentation" class="w100pc" width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;" bgcolor="#141519">
    <tr>
        <td align="center" bgcolor="#141519" background="https://squarespace-email-marketing.s3.amazonaws.com/2020/Product/Updates/storefront-setup-hero.jpg" width="600" height="630" valign="top" style="background-image:url('https://squarespace-email-marketing.s3.amazonaws.com/2020/Product/Updates/storefront-setup-hero.jpg');background-repeat: no-repeat; background-position: top center; background-size: cover;" class="w100pc bgmobile">
            <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" style="behavior: url(#default#VML); display: inline-block; position:absolute;width: 600px; height: 630px; top:0; left:0; border: 0;z-index: 1;" src="https://squarespace-email-marketing.s3.amazonaws.com/2020/Product/Updates/storefront-setup-hero.jpg" />
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block;position: absolute; width: 600px; height: 630px; top:0; left:0; border: 0; z-index: 2;">
            <v:fill opacity="0%" color="#141519" style="z-index: 1;" />
            <div>
            <![endif]-->
            <!-- Containing Table -->
            <table role="presentation" class="w100pc" width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="content" align="center" valign="top" height="630" style="height:630;">
                        <!-- Contents -->

                        <!-- Headline -->
                        <table class="content-headline" role="presentation" width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="padding: 0px 80px 0px 80px;">
                            <tr>
                                <td class="h1 centered" style="padding-bottom: 0px; padding-top: 60px; color:#ffffff; font-family:Helvetica,Arial,sans-serif; font-size:36px; line-height:40px; letter-spacing:-1px; text-align:center;">Turn your website into an online store</td>
                            </tr>
                            <tr>
                                <td class="text-1 centered" style="padding: 25px 40px 35px 40px; color:#ffffff; font-family:Helvetica,Arial,sans-serif; font-size:16px; line-height:22px; text-align:center;">Our Commerce platform gives you the tools you need to manage your inventory, showcase your products, and accept payments online.<br /><br />
                                    To start selling, simply add a product and connect a payment processor.
                                </td>
                            </tr>
                        </table>
                        <!-- Headline END -->

                        <!-- Button - CTA -->
                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
                            <tr>
                                <td align="center" class="text-btn" bgcolor="#ffffff" style="color:#333333; font-family:Helvetica,Arial,sans-serif; font-size:14px; line-height:14px; text-align:center; font-weight:bold; text-transform:uppercase; letter-spacing:1px;"><a href="https://{last_subscribed_website.website_identifier ? last_subscribed_website.website_identifier + '.squarespace.com/config/commerce' : 'squarespace.com'}" target="_blank" style="color: #333333; font-family:Helvetica,Arial,sans-serif; font-size: 14px; line-height: 14px; text-align: center; letter-spacing: 1px; border: 1px solid #ffffff; display: inline-block; text-decoration: none; mso-line-height-rule: exactly; padding: 20px 40px;">Set up your store</a></td>
                            </tr>

                        </table>
                        <!-- Button END-->

                        <!-- Contents END -->
                    </td>
                </tr>
            </table>
            <!-- Containing Table END-->


            <!--[if gte mso 9]>
            </div>
            </v:fill>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>