Text on top of images - gradient underlay needed about twentynineteen HOT 5 CLOSED

Or use text-shadow. Or an invert filter.

from twentynineteen.

From a design perspectiv I would prefer the example of @anevins12.

Text-shadow is in my opinion not an elegant design solution. And with invert filter, you can't control die color of text to make sure, that it fits to the Corporate Identity with the website.

from twentynineteen.

A quick update on this:

As noted over in #121, our image filters + overlays actually help us out here in some respect. Even if a user uploads a 100% white background image, the lightest possible background color that can be rendered while using our overlays is #35729D (the browser fallback described in that thread will result in slightly darker shade: #316B8A). White text on top of that passes WCAG AA. We do have a slight text-shadow on the text as well.

From what I can tell, this is essentially what WCAG recommends as per their notes here:

https://webaim.org/articles/contrast/#sc143

Gradients, background images, and transparencies
Text over gradients, semi-transparent colors, and background images still need to meet contrast requirements, but WCAG does not provide any guidance on how to measure their contrast. We recommend testing the area where contrast is lowest.

@anevins12 can you let me know if that sounds right on your end? I'm not sure where that 0.55 opacity black minimum you mentioned is sourced from.

Thank you!

(Also worth noting: I'm recommending an enhancement in #284 that will allow users to turn off those filters and use a 70% black overlay instead. That should align with these guidelines too).

from twentynineteen.

That works too. I didn't realise there was a blue filter on top of the image already.

The 0.55 opacity figure was from my own research; which produces a 4.7:1 contrast ratio of text on top of the whitest hero image. What you're suggesting with the filters is the equivalent of this, but with blue instead of black.

from twentynineteen.

The 0.55 opacity figure was from my own research; which produces a 4.7:1 contrast ratio of text on top of the whitest hero image. What you're suggesting with the filters is the equivalent of this, but with blue instead of black.

Sounds great. Thanks @anevins12!

from twentynineteen.