Skip to main content
Request a quote
Topics: Accessible design

Making accessible icons and images

A tablet and stylus are lying on a table. There is an image of a person and child on the tablet screen. Next to the people is a colour palette. There is a pot plant on the table to the left of the tablet. The wall behind the table has blue striped wallpaper. There is a framed landscape picture on the wall.

Icons and images can serve as powerful tools to enhance your audience’s understanding of a potentially complex topic.

When used in an Easy Read context, images can help viewers comprehend a concept at a glance. It can also help to connect ideas throughout a piece of text.

They can also aid in recall and memory. They act as both a visual marker to be able to easily pinpoint or return to certain information, as well as to help memorise ideas.

If you are using icons and images in your communications, including Easy Read content, it’s important to consider if they:

  • reflect diversity, and celebrate different cultures, abilities and identities
  • represent and reflect your intended audience
  • can be adapted to suit your branding.

If possible, you should also try to test the icons and images with your intended audience. This might mean having an Easy Read provider or accessible communications expert run user testing for you.

How to make accessible images

Follow a consistent style

Brands should maintain a ‘look’. For example, outline, fill, or inverted styles have distinct looks that stand out to show the personality of the brand and keep the style consistent and clean.

Maintaining consistency means the reader can ’learn’ the style as they work through the content, and it can help in their recognition of forms and concepts.

For example, if the text describes an information document, it is helpful for this icon to maintain a consistent appearance, especially if it is referred to again throughout the text.

Meet colour contrast standards

Colour contrast standards are set by the Web Content Accessibility Guidelines, also called WCAG. These are the internationally recognised standards for digital accessibility.

Consider how different elements of your image interact, and whether the colours are still accessible in contrast to one another. This can be tricky, particularly for more complex images or icons with overlapping elements.

Here’s an example from our ShowMe Images set:

A summer beach scene. There is a beach umbrella in the sand. It is different shades of purple stripes. Below the umbrella are a pair of red thongs and a red and white beach ball. Next to the thongs is a small brown shell. To the right of the umbrella are two palm tress. Behind the sand is water. In the sky there is a big yellow sun.
A summer beach scene. There is a beach umbrella in the sand. It is 2 different shades of purple stripes. Below the umbrella are a pair of red thongs and a red and white beach ball. Next to the thongs is a small brown shell. To the right of the umbrella are two palm tress. Behind the sand is water. In the sky there is a big yellow sun that is outlined and has a gradient colour.

On the left is an example of an image that has been created without colour contrast in mind.

On the right is the same image, but we have:

  • adjusted the lightness and saturation of overlapping colours
  • applied a gradient
  • have outlined the sun to allow the individual elements to stand out from one another.

This is also where an outline style can come in handy.

Here’s another example from our ShowMe Images set:

A gardener tending to a planter box full of flowers. The flowers are light purple and the box is brown. There is a grey watering can next to the box. The gardener is wearing a light blue top, dark blue pants, red shoes, green gloves and a light pink hat. In one hand they are holding a trowel and in the other hand a bunch of light purple flowers.
A gardener tending to a planter box full of flowers. The flowers are yellow and the box is brown. There is a dark grey outlined watering can next to the box. The gardener is wearing a dark pink top and hat, dark blue pants, red shoes and black gloves. In one hand they are holding a trowel and in the other hand a bunch of yellow flowers.

Compare these 2 images. The image on the right uses outlines around areas that don’t meet colour contrast guidelines when overlapping each other. Colours have been adjusted to contrast at a higher level, and elements have been moved to avoid confusing overlap. These are relatively small differences and maintains much of the original style in the left image but can make it a lot easier for people to interpret.

If your organisation’s colour palette and branding use colours that aren’t accessible, you might need to explore:

  • adding other colours that are accessible

or

  • using an outline style so you can make the icons accessible.

Using an outline with strong contrast as part of your icon or image style is a helpful way to make sure the key elements are recognisably separate. It also means you don’t have to worry about contrasting with background colours.

Three people at a park. Behind them there are 2 trees, a park bench and a rotunda.
Three people at a park. Behind them there are 2 trees, a park bench and a rotunda. All elements of the illustration have been outlined.

Be conscious of size

If an image has a lot of detail, the lines and shapes will be more difficult to see at a smaller scale. This is in comparison to a photo, for example.

Keep in mind the size the image will be shown at. Some of the images in this article have a fair level of detail and complexity. As such, they are less effective at a very small size.

When working with images that need to be understood at a small size, you should consider using icons instead.

Icons are simple elements that are easy to quickly understand, for example a speech bubble or a house symbol.

Too many key elements can be overwhelming for some readers. Take care to make sure each element meets high contrast standards and is a good size.

Text in images

It’s important to try to avoid using text in images. Unless alternative text is applied, screen reader users won’t be able to access that information. It can also increase cognitive load.

Be respectful of your audience

With the work that we do, we deal with a lot of sensitive topics. Through our user testing, a consistent piece of feedback is that icons are usually more trauma sensitive than photos.

Using icons can allow the reader to understand the concept without being confronted by a photo that might trigger a trauma response. This is helpful when discussing topics such as violence, abuse, exploitation or death.

Our approach is to create all our illustrations and icons in-house to make sure they are meaningful, relevant, respectful, inclusive and good quality. We also have our own photo library that reflects the diversity of the Australian community. It includes people with disability, First Nations people, older people, younger people and a range of culturally diverse models.

In the near future, we’ll be offering sets of accessible images and icons that can be used for Easy Read. Keep an eye on our newsletter, website and social media for more information.

Help your project reach wider audiences

We can help bring your accessible project to life. Submit a quote request online and we'll get back to you within 24 hours.