Why text on photos disappears so often
A photo is a busy background: light and dark areas alternate. Light text sits sometimes on a dark ground (legible), sometimes on a light one (vanished) — often within the same word. The designer's eye, which knows what's there, easily reads over it. The user in sunlight on a phone doesn't. Legibility is therefore not a feeling but a measurable property.
The 4.5:1 rule
The web accessibility guideline WCAG gives concrete minimum values for the contrast ratio between text and background:
- 4.5:1 for normal text
- 3:1 for large text (from about 24 px, or 18.66 px bold)
These numbers aren't arbitrary — they're calibrated so people with limited vision can still recognize the text. The ratio can be calculated from two color values with contrast checkers. On a solid background that's simple; on a photo the background is uneven — and that's exactly what the overlay is for.
The overlay: the reliable rescue
An overlay is a semi-transparent color area between photo and text. It unifies the background at the text location enough to create sufficient contrast:
- Dark overlay (black, 40–60% opacity) under light text — the classic, works over almost any photo.
- Light overlay (white) under dark text — for bright, friendly image worlds.
- Gradient overlay — only the area behind the text is darkened, the rest of the image stays bright. More elegant than a full-area darkening.
Alternatives to the overlay: a real text box (text on a solid bar), an outline/shadow around the letters, or placing text in an already-calm image area. The same techniques are covered in Creating a quote graphic.
Why your own eye deceives
The most important shift of perspective: "I can read it" is no standard. Whoever built the graphic knows the text and recognizes it even at weak contrast. But:
- older people see with less contrast;
- people with visual impairments all the more;
- everyone in bright ambient light on a phone display;
- the color-blind with a purely color-based distinction.
That's why an objective contrast value is more reliable than your own impression. Think accessibly and you automatically gain legibility for everyone — including yourself in sunlight.
Not just color: the second rule
A related principle: never carry information through color alone. "The red text is important" doesn't help the color-blind — it additionally needs bolding, a symbol, or a clear position. This applies to text on images just as to diagrams, see Making infographics accessible.
Frequently asked questions
How much contrast does text on an image need?
The WCAG guideline requires a contrast ratio of at least 4.5:1 between text and background for normal text, and 3:1 for large text. On a photo the background is uneven — so an overlay or a text box helps to reliably create enough contrast at the text location.
What is an overlay?
A semi-transparent color area (usually black or white) between image and text. It dampens the busy photo background enough that the text stands out reliably — without covering the image completely. A dark overlay for light text, a light one for dark text.
Why isn't my own eye enough to judge?
Because sighted people recognize text that visually impaired, older users, or people on a phone in sunlight can no longer read. The contrast value is an objective measurement that includes those users — a contrast checker is more reliable than your own impression.
Does this also apply to text in social media graphics?
Yes, especially so. Social media images are viewed small, often in poor light, and on a phone. High contrast decides there whether the message lands — the same rules as for web text apply to quote graphics, memes, and story text.