Using images in content

Using informative images in content

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

Only use an image if it helps people understand the content or service. Before using an image, read Before you use images in web content.

Quick checklist: is an informative image needed?

Ask yourself first:

Would people understand this content without the image?

If the answer is no, use an informative image only if all of these are true:

People need the image to understand the content or service.
You cannot explain the same information clearly using text alone.
You can make the information in the image accessible to everyone.
You have the rights and permissions to use the image (especially for photos of people).

If you are unsure, using text instead is usually the safest option.

What informative images are

An image is informative if people cannot understand the content without it.

All essential information in an informative image must also be available in text. This means people can still understand the content if the image cannot be seen or does not load.

How you provide that information depends on the image and its purpose.

Examples of informative images 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)
images of text

Images of text

Images of text contain written information, such as banners, posters or graphics with important text.

Avoid using images of text unless they are essential. Where possible, use real text on the page instead.

Real text can be resized, searched and read more easily by assistive technologies and on mobile devices.

If an image of text is used to share information, the same information must also be available as text on the page.

For example, a graphic used on social media advertising an upcoming event or a diagram on a page showing steps.

A short caption or summary is not enough on its own.

It is okay if an image happens to include text, as long as it is not the main focus and does not contain essential information.

Images of text may be used where the text is part of a logo, brand or essential visual design.

Using colour in images

Make sure colours used to show information have enough contrast to make them readable. Contrast is the difference in brightness between two colours, and a colour contrast ratio is used to measure this.

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

This helps people with low vision or colour‑blindness read the information.

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 + / -).

Describing informative images

Informative images must have accessible text descriptions so everyone can understand the information they add.

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

How you describe an image depends on its purpose and the wider context of the page.

Alt text

Alt (alternative) text is a short description used by screen readers and shown if an image does not load.

Alt text should explain what someone would miss if they could not see the image.

To understand how to write effective alt text and how context affects what it should say, read Writing good image alt text.

Captions

A caption is text shown with an image, usually above or below it. It is often announced by screen readers with the image.

Captions help explain why an image matters to the content.

For an explanation of how captions and alt text work together, read Writing good image alt text.

Nearby page text

Some images include more information than alt text or captions can explain. Use nearby page text when this information would otherwise be missed.

You can use:

simple paragraphs
headings with bullet points
accessible tables for data points

Alt text should still briefly describe what the image is. Nearby page text provides the detailed information.

Example 1

A page includes a fire safety guidance poster with several instructions and safety points.

The full guidance from the poster is written out in the page text as a list of steps.

The image is still included to show what the poster looks like.

The image’s alt text could then be:
“Poster for fire safety guidance.”

Example 2

A page includes a diagram showing the steps to apply for a parking permit.

The steps are written on the page as a short list.

The diagram helps people understand the overall process.

The image’s alt text could then be:
“Diagram showing steps to apply for a parking permit.”

Ask yourself:

What would be missing if this image was removed? If something important would be missing, include that information in the nearby page text.

Images that repeat information (redundant images)

Use this approach when the image does not add any new information.

Some images visually repeat information that is already fully explained in the text.

These images may help some users, but they do not add anything useful for screen reader users. They should be treated as decorative so they can be skipped by screen readers.

When an image is redundant:

do not add alt text or captions
mark it as decorative so it is ignored by screen readers

This helps people move through content more easily.

Example

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.

How to handle this image:
Treat it as decorative so it is skipped by screen readers.

In some cases, even complex images like maps, graphs, charts and diagrams may be considered decorative if all the important information is already explained in the text.

If the page text refers to the image, do not treat it as decorative. People are expected to use it, even if the information is also explained elsewhere.

Key points to remember

Use an informative image only when it adds meaning that text alone cannot.
If people cannot understand the information without the image, it is informative.
All essential information in an informative image must also be available in the page text.
Always decide why an image is included before deciding how to describe it.
Images that only repeat information already explained in the text should be treated as decorative.

Only use an image if it genuinely helps people understand the content or service. If it does not, use text instead.