| 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 |
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.
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?
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.
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.
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.
- 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:
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.