Accessible images aren't a separate deliverable; they're the same images made legible to more people, including everyone using a phone outdoors.

Contrast Ratios for Text on Images

The standard thresholds:

  • 4.5:1 for normal text.
  • 3:1 for large text (roughly 24 px, or 19 px bold and above).
  • 3:1 for meaningful non-text elements — icons, chart lines, form borders.

The complication with photographs is that the background varies pixel by pixel. Measure against the *lightest* area behind the text, not the average. If contrast fails anywhere the text sits, add a scrim, a solid panel or a shadow rather than nudging the font colour.

Colour Alone Must Never Carry Meaning

About 1 in 12 men and 1 in 200 women have some colour-vision deficiency, most commonly red-green. A chart whose only distinction between series is red vs green is unreadable for them — and equally unreadable in greyscale print or on a poorly calibrated monitor.

Fixes that also improve clarity for everyone:

  • Direct labels on chart lines instead of a colour-keyed legend.
  • Different shapes or markers per series, not just different colours.
  • Different line styles — solid, dashed, dotted.
  • Patterns or textures in filled areas.
  • Vary lightness, not just hue — if two colours have similar luminance, they merge in greyscale.

A quick test: convert your graphic to greyscale. If you can still tell the series apart, it works for almost every reader.

Text Baked Into Images

Text inside an image can't be resized by the user, can't be selected or translated, doesn't reflow on small screens, and is invisible to search engines unless duplicated elsewhere. Rules:

  • Prefer real HTML text over a background image whenever you control the page.
  • If text must be in the image (social cards, memes, screenshots), repeat the essential content in alt text or in nearby body copy.
  • Never put critical information — prices, deadlines, contact details — only in an image, in an email or on the web.

Alt Text That Actually Helps

  • Describe the image's purpose in context, not its appearance in detail. A product photo's alt text should say what the product is, not "photo on white background".
  • Decorative images take an empty alt attribute so screen readers skip them. Omitting alt entirely is different and worse — the reader may announce the filename.
  • Charts and infographics need the *data or conclusion* in text, not "bar chart". Put a summary in the surrounding copy and treat the image as an illustration of it.
  • Don't start with "image of" — assistive tech already announces that it's an image.
  • Keep it concise: one clear sentence beats a paragraph.

Meeting these makes your images work for screen readers, for search engines, for a phone in bright sun and for anyone who turned images off — four audiences, one set of rules.