Text contrast over images

Silktide finds text that is placed directly over an image or gradient, where the contrast between the text and its background cannot be measured automatically. These places need a human eye to confirm the text is readable.

Why this matters

Hero banners and photo backgrounds are one of the most common places contrast fails in practice. A photo has light and dark areas, so text that is readable over one part of the image can disappear over another - and the image can shift behind the text as the screen size changes. People with low vision are hit hardest, but text over a busy photo strains everyone.

The same legal minimums apply as for ordinary text: requires a of at least 4.5:1 for regular text and 3:1 for large text (at least 18 points, or 14 points bold), measured against the area of the image behind the text.

How to fix it

Check each flagged element visually. The text must meet the required ratio against every part of the image it can sit over, including at other screen sizes where the image may reposition.
Where contrast is doubtful, add a solid or semi-transparent overlay between the image and the text, or move the text off the image entirely.
Choosing calmer, more uniform imagery behind text also works, but remember the image may be swapped by content editors later - an overlay is safer.
If the text is clearly readable, the finding.

How Silktide tests this

Examine every piece of visible text on the page, skipping hidden text, text inside SVG graphics, and any elements you have excluded from checking.
Identify text whose background is an image or gradient rather than a solid colour. Text over solid colours is measured automatically by Text contrast instead.
Skip backgrounds that cannot affect the text, such as background images sized to zero, and small non-covering background images on list items (typically custom bullet icons).
Report the remaining text for you to confirm, showing the text colour and the background layers involved. Because an image has no single colour, the ratio itself cannot be calculated automatically.

Troubleshooting

The check flags text that is clearly readable

That is expected - this check cannot measure image contrast, so it errs on the side of showing you every case. Review and approve the ones that are fine; they will stay approved on future scans.

The image looks fine on my screen

Check smaller and larger screen widths too. Responsive layouts move text relative to the image, so text that sits over a dark area on desktop can sit over a light area on mobile.