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:
- Establish a process, and then train and trust key staff to comply.
- 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.
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.