Hero images with text overlaid are one of the most popular design patterns on the web, and one of the most common accessibility failures. The problem is fundamental: images are not uniform. Some areas are light, some dark, some busy, some smooth. Text that is readable over one part of the image may be invisible over another.
The Overlay Solution
The standard fix is a semi-transparent color overlay between the image and the text. A dark overlay (black at 40 to 60% opacity) makes white text readable across any image. A light overlay (white at 50 to 70% opacity) makes dark text readable. The overlay sacrifices some image detail in exchange for guaranteed text contrast.
Gradient Overlays
A full solid overlay can feel heavy. Gradient overlays are more elegant: a dark gradient from the bottom (where text usually sits) fading to transparent at the top (preserving the image). This provides contrast where text exists without darkening the entire image.
Calculating Overlay Contrast
Here is where it gets tricky: WCAG contrast ratios assume solid colors. With a semi-transparent overlay on a variable image, the actual contrast depends on what is underneath. The safe approach is to calculate contrast assuming the worst case: the lightest area of the image under the overlay. If contrast passes against the lightest pixel, it passes everywhere.
Your Palette's Role
Your overlay color should come from your palette. Use your dark base at reduced opacity for dark overlays, or your light base at reduced opacity for light overlays. This keeps overlays on-brand rather than defaulting to generic black or white. Your text color should be the opposite base.