Skip to main content

Tips for Making Text More Readable Over Images

When placing text over an image, readability can suffer. Here are two simple ways to darken your image and make text stand out more clearly.

When you place text on top of an image, the text can become hard to read depending on the brightness or contrast of the background. This article introduces two ways to darken or brighten just the image to make your text easier to read.​

Darkening an image with a filter

This method lets you adjust the brightness or darkness of the image itself after placing a text box over it.​

  1. Select the image box. If it's hard to select the image on the canvas, select it from the Layers panel.​

  2. Open the [Image] tab in the right panel. If the right panel is closed, open the right panel first.​

  3. Select [Filter] and adjust the image's brightness to balance how light or dark it appears.​

  4. If you were editing a published site, update the site from the Publish panel. Your changes won't appear on the live site until you update it from the Publish panel.

Overlaying a semi-transparent black box on the image

This method places a semi-transparent box between the image box and the text box, then uses the box's color, darkness/brightness, and opacity to adjust the look.​

  1. Add a new box inside the parent box that contains the image box.
    Use the steps below to overlay a box of the same size.​
    ・Set the new box's width and height to 100%
    ・Set the parent box's alignment to center horizontally and vertically

  2. Place a text box inside the box you added in step 1 so it becomes a child box.​
    ​

  3. Select the box you added in step 1, then open the [Box] tab in the right panel. If the right panel is closed, open the right panel first.​
    ​

  4. Adjust the color and opacity of the box you added in step 1. Open the color palette under [Background color] and use the up/down arrow buttons to switch to RGBA input mode.​
    The four numbers represent red, green, blue, and opacity (0 is fully transparent and 1 is fully opaque). Enter values like the examples below depending on what you want to achieve.​

    • To darken: (0, 0, 0, 0.4)

    • To brighten: (255, 255, 255, 0.75)
      ​

  5. If you were editing a published site, update the site from the Publish panel. Your changes won't appear on the live site until you update it from the Publish panel.

Note: In step 4, if you set the box's opacity using [Opacity] in the right panel, the opacity will also apply to the child text. To keep your text readable, follow the steps and set the opacity using the RGBA value instead.

transparency style filter effect

Related Articles
Swap images on hover
Did this answer your question?