Banners and Other “Images of Text” (Required)

When text is included in an image for the purpose of conveying necessary information to readers (such as text in graphical banners, call‑to‑action graphics, or decorative headings) it must meet standard WCAG contrast ratios. This means at least 4.5:1 for normal‑sized text and 3:1 for large text (18 pt regular or 14 pt bold). WCAG 1.4.5 also notes that images of text should generally be avoided unless the specific visual appearance is essential, as in the case of a logo or wordmark.

Read our article on Text and background contrast requirements for GSU webpages for more information.

Incidental Text (Exempt)

Text that appears incidentally within a larger image, where the text is not informative, nor is it the purpose of the image, is also exempt from contrast requirements.

Examples include a professor in front of a white board with text that is not informative to the purpose of the page, or students standing in front of a campus building's name. These are not considered meaningful text that must meet contrast guidelines.

You can leave the alt text for these types of images set as decorative or use it to inform accessibility checkers that the text is incidental and not needed for understanding the content of the page.

For more information, read our article on Is my image decorative or essential? (Does my image require alt text?)

What can I do to fix image text and image contrast issues?

If Ally or another accessibility tool flags an image because it contains informative text or it has contrast issues, it means users with disabilities can’t reliably access that information. To fix this on GSU WordPress sites, you can choose one of these options:

1. Put the Text on the Page or in an Accessible PDF

If you have informative text in an image that is important to the page (for example, if you put a .jpg of a flyer on your page where the text on the flyer needs to be read), you can move the important text out of the image and place it as regular text on the page or in an accessible PDF that is stored and linked from your PRMC Dropbox folder. 

Note: If you are using an image for something like an event that is titled "Virtual Office Hours," and the image has the words "Virtual office hours" in it, the text in the image is unnecessary as it copies the title text that appears directly below it, and it might serve you better to submit an image with no text as it looks cleaner on the page and attracts more attention without it.

2. Add the Same Text Near the Image

If the image must stay (an image flyer or a branded graphic), you can add all the text that appears in the image directly below or next to it on the page. The alt text for the image could then reflect its purpose and direct users to the nearby content.

Note:

• If the text is already written on the page, keep the alt text short.
• If the image itself carries meaning, summarize that meaning in the alt text.

3. Provide a Text Alternative for Complex Graphics

If a chart, table, or infographic cannot be replaced with an accessible option, you can give a short written summary or include the data in a caption below the image. The alt text for the image could then reflect its purpose and direct users to the nearby content.