Essential information should have a 3:1 color contrast ratio for large text and 4:5:1 for small text. Essential elements in an informative image can include text and visual representations to illustrate a concept.  

Informative Images: Essential Elements

Non-essential elements are decorative elements that help create a background or personality for the illustration. They do not relay information and therefore do not have to meet contrast requirements.

Informative Images: Non-essential Elements

Informative images convey a concept in a short, digestive manner. Therefore they:
- Relay accurate information that is relevant to the adjacent text
- Need captions
- Need alt text if the caption or adjacent text does not explain the image
- Have to meet color contrast guidelines for essential items
- Contain essential and non-essential elements


University of Illinois at Urbana-Champaign

Different image types will have different accessibility guidelines and different contexts on where it's appropriate to apply these guidelines.
- Decorative images
- Informative images
- Functional images

Types of Imagery

Material Design Documentation

Decorative images don't add information to the contents of the page. Therefore they:
- Don't need captions
- Don't have to meet color contrast guidelines
- Don't need alt text
- Should have a null (empty) tag (alt="") in the image label so screen readers skip them

Decorative Images

Informative Images

Functional images are logos, icons, images within a button, and images that are actionable (ie. a link). The alt text for functional images is different than alt text for other types of imagery. This is because functional imagery depicts the function of the image, not its contents or what it looks like. When an image is within a button, add an alt tag that explains its function with an action verb.

Learn Before

Related

Learn After