a11yproject-text_on_bkgdimages.md

layout	title	description	author	published	categories
post	Text on Background Images	Guidelines for styling text over background images	Jen Strickland	false	accessibility, CSS, design - Category Name

Design Considerations for Text Over Background Images

Text on background images requires manual check and thoughtful evaluation. Certainly test with different font sizes, zoom levels, and window sizes to make sure that the styling is flexible enough to accommodate user changes.

Contrast

The usual rules for color contrast are certainly helpful. Using text-shadow or inserting a darker area between the text and background can increase the distinction between the text and the background.

Tip: It can be helpful to use a screenshot of the design and open it in graphics software like Photoshop or Sketch. Using an eyedropper tool to pull various colors of the background image with a color contrast tool, do each of those individual colors pass for the font size and weight?

Scrolling

If the text and image scroll together, readers can't separate for a clearer view of the text. If the text and image don't scroll together, then some readers may get migraines from scrolling.

Flexible Font Sizing

Readers may use different fonts, or larger font sizes for readability, so text may take more space than with the original layout. How will your design adapt if the font increases? What if it changes to a completely different font?

Tip: It is a good habit to test designs by decreasing and increasing the font size in the browser two times to ensure the design is sufficiently flexible.

Cognitive Considerations

There's a cognitive load to consider, as well. Is the background image busy? If so, no matter the color contrast, it may be too difficult to read the text with the image background.

Tip: Adding a background color, either opaque or with a dark transparency, between the text and image can be helpful.

Examples of text styling on background images

• An example of base text styling on a background image:

• An example of increasing the font size two times on a background image:

• An example of decreasing the font size two times on a background image:

Thank you, @MarjaE2. I included some of your feedback, but I'm not sure how to accommodate the scrolling part. Is it okay with you if I incorporate your sentences exactly as written?

If you want an example, Twitter is a good bad example. The sheer between Twitter threads and the background on either side is one of my migraine triggers.