Accessibility Guidelines for Images

The following guidelines should be validated for accessibility compliance for all image content:

Alternative Text

Provide "alt" attributes for all images.

For example: <img src="logo.jpg" alt="Company Logo" />

WCAG Guidelines referenced:

For content images, make the "alt" attribute a brief description of the content.

For example:

<img src="doctor.jpg" alt="Doctor examining a child patient" />


<img src="sale.jpg" alt="20% sale till November 2011" />

WCAG Guidelines referenced:

For image links, use the "alt" to briefly describe the link destination.

For example: <img src="next.jpg" alt="Next page of the Web Accessibility article" />

WCAG Guidelines referenced:

For purely decorative images, it is not necessary to add a descriptive "alt" tag. Use an empty "alt" tag instead.

For example: <img src="line.jpg" alt="" />

WCAG Guidelines referenced:



Colour Contrast

Ensure that text colour has an acceptable colour contrast ratio.

For most colours, 4.5:1 is an acceptable ratio, however for the red/orange colour range, a 7:1 ratio is recommended. There are various colour contrast checking tools available online (i.e. Colour Contrast Check by

WCAG Guidelines referenced:

  • Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    • 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

      Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

      Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

      Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.