Images

Topic	Technique	WCAG AA Requirement
Informative Images and Active Images (e.g. links, buttons, or controls)	Alternative text: The image MUST have alternative text. Refer to the techniques for various image types: images using <img> active images form input images SVG using <img> SVG using <svg> HTML5 canvas icon fonts	Required WCAG 1.1.1
	Meaningful description: Alternative text MUST be meaningful (accurately conveying the purpose of the image, and the author's intent in a way that is useful to those who cannot see the image). Note 1: Image links SHOULD describe the link destination. Note 2: Button/control links SHOULD describe the purpose and/or resulting action of the button or control.	Required WCAG 1.1.1
	Concise: The length of the alternative text for informative images SHOULD be concise (no more than about 250 characters).	best practice
	Avoid restating that the element is an image: Alternative text SHOULD NOT include words that identify the element as a graphic or image (e.g. avoid phrases like "graphic of," or "image of," etc.), because screen readers already state the role (e.g. by saying "graphic" then reading the alternative text).	best practice
Unessential images (Purely Decorative or Redundant, and not Active)	Unessential Images: Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text SHOULD be given null (empty) alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds.	best practice
Complex Images	Complex Images: Complex images MUST be briefly described using alt text AND MUST have a more complete extended description. Note: It is not "wrong" to provide descriptive alternative text in these instances, but it is highly discouraged if the image is truly unessential.	Required WCAG 1.1.1
Background images	Informative background images: If a background image conveys information, alternative text MUST be provided (e.g. via regular visible text, by adding role="image" and aria-label, or by other means).	Required WCAG 1.1.1
	Active background images: If a background image is the only "content" in an active element (e.g. a link, button, or control), the active element MUST have an accessible name (e.g. via aria-label or similar).	Required WCAG 1.1.1
	Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background.	Required WCAG 1.4.3
	Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.	Required WCAG 1.4.3
	Unessential background images: Alternative text SHOULD NOT be provided for unessential background images.	best practice
Images of Text	No Images of Text: An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text (unless the text is essential — such as a logo — or the font, size, color, and background are customizable.).	Required WCAG 1.4.5
	Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background.	Required WCAG 1.4.3
	Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.	Required WCAG 1.4.3
Animated Images	See the requirements for Animation, Motion, and Timed Content	Required Multiple
Image CAPTCHA	Alternative text: Image CAPTCHA elements MUST have alternative text describing the purpose of the image.	Required WCAG 1.1.1
	Sensory alternatives: Image CAPTCHA elements MUST be supplemented with at least one auditory alternative method.	Required WCAG 1.1.1
	Deafblind access: At least one text-based alternative SHOULD be provided that allows users who are both deaf and blind to pass the CAPTCHA. Note: Deafblind users typically use screen readers to convert text to braille, using a refreshable braille device.	best practice