Text on top of images - gradient underlay needed

[anevins12]

Once we add text on top of images, we'll need to have a consistent underlay/overlay design pattern that ensures text is accessible on any image.

The minimum contrast that is required for an overlay just under 0.55 opacity of black. I recommend adding a solid opacity of black underneath the text and then adding a gradient above or below that text, dependant on where it is displayed on the image.

Example: http://jsfiddle.net/0nbsdtac/

[joyously]

Or use text-shadow. Or an invert filter.

[00travelgirl00]

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.

[kjellr]

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).

[anevins12]

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.

[kjellr]

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!