Skip to content Skip to main navigation Report an accessibility issue

Graphics

Keep in mind that web graphics do not exist in a vacuum. They should always have a larger context and should be designed with that context in mind. They are elements of overall digital design, and as such, should never comprise the entirety of a web page or email.

Any text appearing within a graphic must be accompanied by a meaningful alt-attribute and must meet WCAG contrast guidelines.

Graphics tips

  1. Try to avoid embedding text (words) in graphics. Text that appears in graphics, if used to convey meaning, must be repeated in HTML live text along with the graphic. This repetition produces a repetitive and jarring user experience.
  2. Use a meaningful “alt” text for all graphics.
  3. Where graphics are nothing more than an “icon-like” symbol with an accompanying word, consider removing the word from the graphic and instead using HTML live text.
  4. Work with content authors, designers, and developers to provide alternatives for non-text (graphic) content.
  5. If you absolutely must embed text in an image, ensure that the color contrast for that text meets minimum contrast standards. To check contrast, refer to WebAim’s color contrast checker.
  6. Never use orange text or backgrounds. Orange should be used as an accent color or for icons and other graphics that do not contain words.
Share Your Big Ideas

Share your big ideas.

Figure 1. The text in this graphic is not searchable and is not high enough contrast. To compensate for the low-contrast type, the text is repeated. This helps accessibility, but it creates a jarring and repetitive reading experience.
Icon of hands sharing a light

Share Your
Big Ideas

Figure 2. There is no text in this graphic. The text is now html which avoids the contrast and other accessibility issues.


Icon of hands sharing a light
Don’t place graphics made for print in websites or emails. All text is embedded in the image and is not readable by screen readers.
Icon of hands sharing a light
DO keep graphics simple and appropriate for the web, allowing for text content to be presented in live text.