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

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

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

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 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 site design, 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.