Text on Photos

The placement and treatment of text atop a photograph can amplify the story's impact. Nonetheless, it's not universally suitable to overlay text on an image.

Guaranteeing that the text is conspicuous, exhibits high contrast, and is set against a background that isn't excessively textured promotes greater inclusivity for individuals with vision impairments.

STRATEGIES FOR TEXT CLARITY

BDM_CTZN_022424_01_C_001_00_01_NW.pdf

PLACE TEXT
ON OPEN, CONSITENTLY
DARK OR LIGHT BACKGROUND

Text should only be placed on photos with adequate space for legibility. In the design to the left, there is ample space near the bottom of the photo for a headline. The designer utilized a bold white sans-serif font for impact and added an opaque white box behind the body text to enhance readability.

PLACING TEXT ON A HEAVILY TEXTURED BACKGROUND

While it's generally not ideal to place a headline on a busy photo, there are situations where it becomes necessary. Employing a colored box or a highlight behind the headline are two effective methods for clarifying the text and ensuring appropriate contrast. Implementing one or more of these strategies can enhance clarity for all readers.

STRATEGIES FOR
CLEARER TEXT

Use of outer glow
Utilization of a drop shadow
Placement of a colored
box behind text
Incorporation of a black-to-transparent gradient between the photo and headline
Use of a medium to bold
version of the font
Increasing the size of the headline
Placing a highlight behind text

text on photo example.pdf

In the design, "Big Name, Big Buzz," despite the background trees, the space remains consistently dark, preserving text clarity. The designer employed a medium to bold sans-serif font with suitable contrast, ensuring excellent legibility.

BUF_NEWS_111223_01_C_001_00_01_NW.pdf

Conversely, in the design, "Stories to tell," the background comprises heavily textured light and dark colors. To enhance clarity, the designer inserted a semi-transparent white box behind the headline and deck.

PERIPHERIAL VISION TEST

When placing text on a photo, it's important to consider the reader's ability to spot text by conducting a peripheral vision test. To do this, focus on the center of the photo and attempt to use your peripheral vision to identify each element (kicker, deck, headline, byline). If any of these elements are difficult to spot using peripheral vision, it indicates that people with vision impairments might also struggle to locate them.

Individuals with low vision, which may not be correctable by glasses or contacts, often rely on pen readers to engage with designs. For them to effectively use a pen reader, they must be able to locate where the text is placed on the page. In this case, even if the deck were placed in a clear location, the text would still not be accessible due to the use of reverse text.

Its worth mentioning some people may have vision impairments that affect their central vision, hemispheres of their visual field, or contrast sensitivity, further emphasizing the need for clear and accessible text placement.

CHECK FOR HIGH CONTRAST
OF TEXT ON A PHOTO

COMPLIANCE COLOR CHECKER

Avoid picking colors directly from a photo for headlines. Instead, utilize the accessible color palette, which meets contrast standards set by the Americans with Disabilities Act and has been tested for color vision deficiency friendliness.

The Compliance Contrast Checker is an invaluable tool for placing text over a photo or on a background that is not white or black. Adjust colors in the checker by modifying the CMYK values in the bottom box. Green checkmarks on the side of the checker indicate that a color provides sufficient contrast.

When using the checker, aim to employ two or three inks at most. Using fewer inks helps reduce the risk of poor printing. (Refer to the "Eliminating Poor Printing" section at the bottom of the High Contrast Color page for further details.)

FINDING THE
BACKGROUND COLOR

Use the standard color palette for headline text.

Use the eyedropper tool (shortcut: i) to collect the color from the photo by picking a spot with the targeted color and clicking. Use F5 shortcut to open the swatches panel (A). Add the color by clicking the + sign in a small box near the bottom right corner of the panel (B). Hover over the the multicolored box all the way to the right in the same line as the color in the swatch panel to see the cymk values or double click the multicolored box to open a pop up window (C). Copy the values from the pop up window (D). Enter the values into one of the columns on the contrast compliance checker.

FIND CMYK VALUES
OF THE TEXT

Use the standard color palette for headline text.

Use F5 shortcut to open the swatches panel (A). Hover over the multicolored box all the way to the right in the same line as the color in the swatch panel to see the cymk values or double click the multicolored box to open a pop up window (C). Copy the values from the pop up window (D). Plug these values into the remaining column of the contrast compliance checker.