Using images in content

Using informative images in content

Start with Before you use images in content before adding informative images.

Informative images add meaning that text alone cannot provide. They support content so people understand it more easily.

On this page

Quick checklist: is an informative image needed?

Use an informative image only if all of these are true:

  • There is a real user need for the image.
  • Text alone cannot clearly explain the information.
  • The image helps people understand the content in a different way.
  • You can provide an accessible description (alt text OR nearby text).
  • You have the rights and permissions to use the image (especially for photos of people).

If these conditions are not met, use written content instead.

What informative images are

Informative images support content by providing meaning people cannot get from text alone. 

If people cannot understand the information without the image, it is informative.

All essential information in an informative image must also be available in text. How you provide that text depends on the image and its purpose.

Examples include:

  • photographs in news articles
  • photos of people or events that are relevant to the content
  • maps, graphs, charts, diagrams
  • illustrations or graphics referenced by nearby text
  • visual instructions (steps in a process or safety directions)

Using colour in images

Make sure colours used to show information have a sufficient contrast to make them readable. A colour contrast ratio is used to measure the difference in brightness between two colours.

Non-text content like images, including images of text, must have a minimum colour contrast ratio of at least 3:1. 

Where possible, aim for at least 4.5:1, as this is easier for most people to read.

For example, a line chart must have good contrast between the:  

  • text labels and background colours
  • lines and background colours  
  • lines next to each other 

Do not rely on colour alone to communicate meaning. Use text labels, patterns, or symbols where needed.

Decorative images or logos do not require accessible colour contrast.

Learn how to check contrast ratios in different formats:

To learn about text contrast, go to How to write accessible content: Readability

Image quality

Images should remain clear when zoomed up to 400%. This helps people using screen magnifiers or smaller screens.

Low‑quality or pixelated images can make content harder to understand or navigate.

To test this, use browser zoom controls (CTRL and + / -).

Describe images

Informative images must have accessible text descriptions so everyone can access the information.

Always decide why an image is included before deciding how to describe it.

Alt text

Alt (alternative) text is a short description used by screen readers. It is not normally visible to sighted users, but may appear if the image does not load.

It should:

  • describe why the image is included, not just what it shows
  • be 1 to 2 sentences (up to 150 characters)
  • include the type of image if helpful (for example, map, chart, photo)
  • use figure names if available (for example, “Figure 1”)
  • not start with “Image of” (screen readers announce it’s an image)
  • not repeat information already clearly in nearby text

Do not rely on auto-generated or AI-generated alt text. It cannot know the image’s purpose or why it matters.

Nearby text descriptions

If the image contains more information than alt text can explain, provide a longer description nearby (above or below the image). 

You can use:

  • simple paragraphs
  • headings with bullet points
  • accessible tables for data points

Alt text can briefly identify the image and point users to the nearby text.

Captions

Captions help all users understand the image’s role in content. They usually appear beneath the image and help explain its context.

Do not add captions (or alt text) to purely decorative images.

Using captions and alt text together

Captions and alt text should both support the image’s reason for being there.

  • Use captions to explain how the image supports the content
  • Use alt text to describe what someone misses if the image is not available
  • Do not repeat the same information in both

Some overlap is acceptable, but avoid duplication that would cause screen readers to repeat information twice.

Example: Caption and alt text together

You have a web page which discusses the history of Rufford Abbey Country Park in Nottinghamshire. You include a photograph (see image below) of the abbey ruins in a section about its history as a monastery to show how it looks today.

The caption adds context that supports nearby text. The alt text briefly describes what's missing from the caption, but still obvious to someone who can see the image.

  • Caption: 'Rufford Abbey ruins were once a 12th Century monastery.'
  • Alt text: 'Photograph of Rufford Abbey ruins on a sunny day'

Both support understanding without repeating the same information.

Redundant images

Redundant images show information already fully explained in the text. They can help some users but are not essential.

Redundant images are not decorative, but are treated as decorative for accessibility purposes because they add no new information.

Do not add alt text or captions to redundant images.

Images referenced in the text are not redundant, even if the information is explained elsewhere. This is because users are expected to rely on the image.

Example of a redundant image:

  • Text on a web page reads: 'Water fire extinguishers are red and are used for Class A fires involving materials like wood, paper, and textiles. They are typically located near exits and fire alarm call points.'
  • Nearby image: Photo of a red water fire extinguisher labelled for Class A fires near a fire alarm call point.
  • Image alt text: Leave empty and ensure the image is marked as decorative.

Do not add redundant images unless they are genuinely needed.

Complex images like maps, graphs, charts and diagrams can sometimes be redundant, depending on how they are used and explained.