Skip to content

Instantly share code, notes, and snippets.

@jenstrickland
Last active November 23, 2018 20:16
Show Gist options
  • Save jenstrickland/b4a8aded896744f46066f24981fdd743 to your computer and use it in GitHub Desktop.
Save jenstrickland/b4a8aded896744f46066f24981fdd743 to your computer and use it in GitHub Desktop.
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:

example of base text styling on a background image

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

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:

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

@MarjaE2
Copy link

MarjaE2 commented Dec 10, 2017

If the text and image do scroll together, then readers can't separate them for a clearer view of the text. If the text and image don't scroll together, then some readers can get migraines from scrolling. Also consider that readers may use different fonts, or larger font sizes, for readability, so text may take more space than with the original layout.

@jenstrickland
Copy link
Author

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?

@MarjaE2
Copy link

MarjaE2 commented Nov 23, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment