How can I convince others that text over background images is a bad idea?

Question

I'm being pressured to build a feature that would make it easy for users to create web pages that feature large text over large images. Like this:

I am of the strong opinion that this design pattern is problematic for several reasons:

• Big images == big files sizes == bad
• Inevitably leads to someone putting light text on a light image (or vice versa)
• Reinforces the false assumption that everyone has a large screen

I feel like building this feature will encourage people to use this pattern and I'm having trouble convincing other stakeholders that this is a bad idea.

North, a set of standards and best practices have a section on Outdated Design patterns which is pretty clearly against this:

Large background images add a large amount of weight to a page for very little actual gain

and

Placing text over images should be avoided for variable length text as the combination of the two has a tendency to produce unexpected results and has a high likelihood of obscuring important parts of the image or overrunning and potentially covering the entire image if not well controlled.

The problem with those quotes is that they don't provide any empirical evidence.

There is a similar argument against using carousels. However, there are several studies that seem to 'prove' that carousels are a bad idea, see Carousel Interaction Stats, Rotating Offers: The scourge of home page design, and The rise of the carousel.

Are there any empirical studies or authoritative resources (besides North) which support my argument? Are there any which contradict it?

Answer 1

Yes, there are guidelines for placing text over images

Here is guidance from a few highly regarded organizations:

Nielsen/Norman Group provides good guidance on how to place text over images while ensuring high enough contrast to ensure readability:

When combining emotion-provoking imagery with informational text, ensure that the text is readable by creating a high-contrast ratio between the text and its background.

(Ensure High Contrast for Text Over Images by: Aurora Bedford)

The United States government has official tools to help you comply with Section 508 website usability standards. If the text on your site complies with these guidelines, you can rest assured its readability is acceptable.

Section 508 guidelines are based on globally accepted best practices of how text should look to accommodate readers with vision disabilities. The guidelines adopted by the U.S. Government are in accordance with those from the International Organization for Standardization (ISO), the American National Standards Institute (ANSI), and the current minimum contrast guidelines (SC 1.4.3 ) from Web Content Accessibility Guidelines (WCAG 2.1) published by the The World Wide Web Consortium (W3C).

Section 508 reads (Hyperlink added.):

A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

Please note that American National Standards Institute’s document references above, ANSI-HFES-100-1988, has been superseded by ANSI/HFES 100-2007.

Section 508 currently references the WCAG 2.1 AA standard for its requirements. This is likely to be updated to newer versions of this standard in the future.

Better guidelines to follow

Although I disagree with some of the conclusions you accepted from the article you quoted, you are correct to be concerned. (Ignore any comments in this Q&A that suggest this issue is a “no-brainer” — it is not — and make sure you get this right.)

As adhering to Section 508 guidelines/the WCAG standard may help shield your company from liability, they are excellent guidelines to present to your stakeholders, regardless of whether your company is marketing towards users with vision disabilities.

Facilitating Compliance by Other Teams

Regarding ensuring compliance on a site that will be maintained by others in a CMS, there are two basic strategies for dealing with this:

1. Establish a process, and then train and trust key staff to comply.
2. Develop a design and system that enforces compliance technologically.

In a recent project of mine, we started with the first strategy and switched to the second. The content managers simply found it was easier and quicker to find images that looked good within the tigher site design constraints, rather than to restrict themselves to the much smaller set of images that would be compliant.

Enforcing High Contrast within a Design

We managed this by creating a layout which places white text on a black semi-opaque background above the image. To test, make the background image completely white and check the contrast — if it is compliant in that context, your settings will (mathematically) work with any image. The Nielsen Norman Group article shows examples of this.

These days you may also be able to enforce high contrast with stroke (a.k.a., text shadow) although I haven’t really seen this done beautifully.

A note on image sizes

I’m not sure the example you provided should be considered a “large background image.” Seems like a typical, moderate sized web banner to me. Just make sure your organization optimizes/compresses the images for web consumption.

Small Screens

The image the in the example above would not be so great on a phone, and thus it should not appear on a phone. An (optional or mandatory) second field should be included in the CMS that would provide a background image for small screens (phones). Ideally, this would be another version of the same image. In this example, perhaps just the surf without the creatures. That will give consistency of experience across devices.

Answer 2

Those problems you mentioned are not really "problems" and the current state of www is a good demonstration of that.

However, your question was about convincing people, so I suggest you do exactly what you did here. You introduce the problem visually, so that people can "touch" it.

Answer 3

The above comments have discussed how the issues mentioned by you are not real issues and can actually be resolved by simple engineering. However, I'm going to help your cause and try to find reasons on how you can convince your stakeholders.

1. Readability is hard to get and could often go wrong if they decide to change the image
The text overlay is not the easiest thing to get and there are a lot of variables that you might need to consider. Overlay color, transparency, color of text, size of text with respect to the image. You wanna ask the question if that information is really worth that hassle.

2. Images provide emotion, Text provides information
Yes, the image definitely makes it catchy but does that force you to compromise on important content? Are your content strategist breaking their head over how to come up with the right content so that the combination looks good.You need to remind them that content is the king and its quality with the right quantity will determine the success of this experiment.

3. W3C : Contrast Understanding

The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background

This is a great point if you want to convince your business against Text over images.You can read further at W3C : Contrast Understanding

You should read up on this answer by

Here are few links that could help you create an argument:

• Readability of text over images
• Can text shadow enhance readability

I hope this helps.

Answer 4

Disclaimer: I'm neither experienced much with user interface design nor with "front-end design". I like my terminal, emacs and a tiling window manager. I even access Google from the command line.

I'm being pressured to build a feature that would make it easy for users to create web pages that feature large text over large images.

Basically your users are the people creating web pages, am I right? I'd like to introduce a different point of view then:

I'm one of your users. I'd like to create a shiny web page. I've seen some examples on the web with nice big pictures and cool text over them, I want that too.

Possibility 1: The tool you provide makes it hard or impossible to create a design similar to what you showed in the question. Oh man, probably I should get another tool to do the job ...

Possibility 2: You implement it / make it easy to achieve designs similar to what you showed us. Great I'll use that ... [2 months later] ... ah, another complaint about unreadable text / site load time / accessibility issues ... if only I'd used a different design back then ... (and maybe switched tools, too)

Both of the possibilities can lead to frustration for your users. Thus I'd instead suggest the following:

Possibility 3: Make it easy to create such a design, but inform your user as soon as possible about the issues that might arrive from such a design.

This can be warning with the points you've given here in your question, e.g. when a user selects this design (template). You can go further and tell your users information like

• Minimum required / ideal display size for current design
• Estimated site load time on (whatever) mobile connection

You could also check text on images for readability (generate small regions around the "intersection" between the text and the background, estimate contrast, warn if outside of some boundary) though this might be a lot of work to implement.

However you do it, make your user aware about the implications of their choices.

Answer 5

Just like DasBeasto accurately mentions in his comment, anyone who knows how to develop sites will overcome these trivial issues (please note trivial is the keyword here).

As for advantages of images and research.... well, rather than wandering the web for that report about a single specific site, I did just a quick search of some unicorns:

• https://www.airbnb.com.ar
• http://slack.com/
• http://www.mi.com/en/
• https://www.fitbit.com/
• http://www.apple.com/

While I don't know the inside info for these companies, I know for a fact they have big UX and research departments. And all of them are doing what that North company says is wrong. So, what would you think is the correct answer here?

Answer 6

I think that the custom aspect of the stakeholders wants makes this challenging but not the worst idea ever. If you don't feel like they understand the potential pitfalls, make some mockups which capture some of potential worst case scenarios help illustrate your concern. The image you posted is an ideal situation and looks great. Neither is quantitative data, but it doesn't need to be.

Answer 7

I agree with some of the comments above. There are ways to add in safe practices what would reinforce the text clarity on a background image. As mentioned, there are several ways to do this. One example that comes from the print world and is often forgotten today. By placing a shadow that is blurred out, you can increase the contrast. Most people don't even notice the blurred shadow. This has been done in print for a long time to help resolve this issue. Just one idea here.