How to Put Readable Text Over a Photo (Every Time)

You made a "Summer Sale — 30% Off" post. The photo is a bright beach at golden hour, and it's gorgeous. Then you dropped white text on it, and the word "SALE" landed on the pale sky. Now it's a faint ghost you have to squint at. So you switched the text to black. Now it's a smudge on the dark water. Neither works, and you're starting to think the photo is cursed.

It isn't. The photo is fine. The problem is that you're asking one flat color of text to survive across a background that changes brightness from corner to corner — and no single color survives that. Readable text over a photo is never about picking the right color. It's about controlling the small patch of image directly behind your words.

Here's the sequence I use every time, and none of it takes design talent.

Why text disappears on a photo (the real reason)

Your eye reads text by contrast — light letters on a dark patch, or dark letters on a light patch. A solid-color background gives you the same contrast everywhere, so one text color works across the whole thing. A photo doesn't. A beach shot might be near-white in the sky and near-black in the shadows, sometimes within the same word.

There's an actual threshold here. For text to read comfortably, the contrast ratio between the letters and what's directly behind them should be at least 4.5:1 (that's the WCAG standard for normal body text, and it's a good bar for any text you want people to actually read). White-on-pale-sky might be 1.4:1. That's why it vanishes.

So the fix is never "find the magic color." It's "make sure the patch behind the text has enough contrast — and keep it that way across the whole word." You do that with placement first, then a scrim, then color.

Step 1: Put the text where the photo is quiet

Every photo has a busy area (the subject, the horizon, the detail) and a quiet area (open sky, a blurred wall, a shadow, water). Text belongs in the quiet area. Not because it's a rule — because a quiet area has one consistent brightness, and consistent brightness is what lets a single text color survive.

On the beach photo, the quiet zone is the darker water in the lower third. Move "SALE 30% OFF" down there and white text suddenly holds. You didn't change the color. You changed the neighborhood.

If your subject is dead-center and there's no quiet zone, that's a framing problem — reshoot, recrop, or pick a photo with breathing room. Half of "unreadable text" is really "text jammed onto the busiest part of the image."

Step 2: Add a scrim (the one move that always works)

A scrim is a semi-transparent panel between the photo and the text. It's the single most reliable trick in the entire craft, and it's the thing amateurs skip.

Two flavors:

• Solid scrim — a dark rectangle at maybe 45–60% opacity sitting behind a block of text. Clean, modern, unmistakably readable. Great for a headline in a corner.
• Gradient scrim — a band that fades from opaque at one edge to transparent at the other. Feels more organic because you don't see a hard rectangle edge; the photo just "gets darker where the text is."

Either way, the scrim guarantees the patch behind your words is dark (or light) no matter what the photo is doing under it. The bright sky, the busy sand, the horizon line — all of it gets muted right where the text sits, and nowhere else. This is how nearly every movie poster, magazine cover, and good Instagram post keeps text legible over wild imagery. It's not a cheat. It's the technique.

Step 3: Now pick the text color

With placement and a scrim handled, color is the easy part:

• On a dark scrim, use white or a very light tint. On a light scrim, use near-black or a deep version of your brand color.
• Pull the accent from the photo. If there's a warm sunset orange in the image, an orange badge or an orange underline ties the text to the picture instead of fighting it. One borrowed color reads as intentional.
• Keep it to two colors max on the text itself — a headline color and one accent. More than that and you're back to clutter.

If you want to double-check you cleared the bar, most contrast checkers are free — drop in your text color and the scrim color and confirm you're at 4.5:1 or better.

When you can skip the scrim

Sometimes the photo does the work for you: a deliberately dark, moody image with a big empty corner, or a shot that was taken with text in mind (lots of soft, even background). In those cases text sits directly on the photo and reads fine. A light text-shadow — soft, low, not a hard black drop — can buy you a little extra separation without a full scrim. But when in doubt, scrim. A scrim on an image that didn't strictly need one still looks intentional. Unreadable text never does.

Building one in Ridvay Studio

Here's the part that makes this fast: in Ridvay, the photo, the scrim, and the text are separate editable layers, so you can run all three steps without regenerating anything. Open Studio and type:

Summer sale Instagram post, 30% off, on a golden-hour beach photo, bold white headline in the lower third with a dark scrim panel behind the text so it stays readable, small orange sale badge

What comes back isn't a flat picture — it's a real design: a background photo layer, a semi-transparent rectangle, a headline text layer, and a badge, each one selectable. Now apply the post:

1. Move the text to the quiet zone. Click the headline and drag it down over the darker water. Watch it snap into legibility as it leaves the bright sky.
2. Tune the scrim. Select the rectangle behind the text and drag its opacity — down until you can just see the photo through it, up until the words are crisp. Somewhere around 50% is usually the sweet spot.
3. Pull a color from the photo. Recolor the sale badge to the sunset orange in the image so it looks like it belongs there, not stuck on.
4. Resize for every platform. Once it reads well, use one-click resize to spin the same design into a Story and a Facebook post — the scrim and text scale with it, so it stays readable at every size.

Because every piece is a layer, "make the text readable" becomes three small drags instead of a re-roll. That's the whole point of an editable design over a flat AI image — you can fix the exact thing that's wrong.

Want to start from the worked example above? Open it in Studio with the prompt pre-filled →

The one-line version

Readable text over a photo isn't about the color of the text. It's: put the words where the photo is quiet, drop a scrim behind them, then color for contrast. Do those three in order and you'll never fight a "cursed" photo again.

If you want to go deeper on the color side, the professional color combinations post covers picking palettes that read well, and once your text is legible, design principles for non-designers shows how hierarchy and whitespace make the whole thing feel finished.

Try it now: Put readable text over your own photo in Ridvay Studio →