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.

---