How to Make Accessible Visuals

This article will guide you on how to make accessible e-signs, charts, and images.

Best Practices

Avoid color-coding

  • Don't rely on color alone to convey meaning. To ensure accessibility for students with color-blindness or low vision, always pair color-coding with text labels, shapes, or patterns. If it doesn't make sense in black and white, it needs a secondary indicator.

Example: 

A table comparing noncompliant and compliant ways to label groups using color. The left column, labeled Noncompliant because the only indication of group is color, shows two rows, one with a green background and one with a yellow background. Both contain meeting times. The right column, labeled Compliant because the groups are also labeled with the group name, shows the same rows, but with the text Green Group and Yellow Group added above their respective meeting times to provide a text-identifier.

Use a color analyzer

  • To ensure readability for students with partial sight, low vision or color blindness, always maintain a strong contrast between text and background colors. High color contrast designs reduce eye strain and makes digital resources accessible to everyone.

Example:

A two-column table demonstrating the importance of color contrast for readability. The left column, titled Poor color contrast, shows the text American History Timeline in black against a dark mustard-yellow background, making the text difficult to distinguish. The right column, titled Appropriate color contrast, displays the same text against a much lighter, pale yellow background, providing high contrast that makes the words clearly legible.

 

  • Typically, the best color choices to achieve a high color contrast are dark foreground or text colors and light background colors. It is considered a best practice to verify the color contrast of PowerPoint slides and other visuals using a color contrast checker to ensure accessibility.

Create color-safe charts and graphs

  • Don’t rely on color alone for effective graphs or charts. These can be difficult for students with color vision deficiency to interpret. To ensure accessibility, supplement color with contrasting textures, patterns, or direct text labels so datasets remain distinguishable in any format. Learn more about data visualization.

Example:

image of graph chart with color and horizontal lines                             chart graph showing columns one with horizontal lines and the other with bright yellow

Use alt text, captions, or long descriptions on all images

  • Make images accessible with alternative text (alt text). Provide a clear, concise description for all photos, illustrations, and charts. Ensure all text within an image is included in the alt text. If the visual is too complex for a brief tag, you can provide a long description in a caption or separate document. Learn more about alt text.

 

Word and PowerPoint

  • Right click on the image and select “View Alt Text” and Add your alt text.

  • or click the “generate alt text for me” button.

image of word document showing how to add the alt text

Google Docs and Google Slides

  • Right-click the item and select Alt txt. Enter a description in the Description field (not the Title)

image of word document showing how to add the alt text

 

 

Still Need Help?

Ask CIT! 📞 (585) 245-5588 | 📧 Email | 💬 Chat | 📝 Submit a Request and we'll be happy to assist you.

Print Article

Related Services / Offerings (1)

Accessibility Consultation
Request accessibility consultation for digital materials used in courses, departments, or other campus business.