H1 text greyed out in page view & browser preview

I have been struggling with this for hours.
I created a bloc with a background image and checked top and bottom row option.

The top row has an H1 text tag - color set to white. When I hit the arrow preview button ^V the text is very greyed out. I get a slightly better view in Preview in Browser mode.

I have tried every option and deleted the custom classes associated with this H1 tag without success.

This occurs in all the break points.

I am on 3.1.2

Yet the H3 bottom row in this same bloc works perfectly.

What is causing this?

Thanks in advance.

Rich

A custom class with opacity value set lower than 1. The number keys apply this when an object is selected.