Images and Graphics
Images and graphics should work for everyone, including people using screen readers or other assistive technologies. By using alt text, long descriptions, sufficient color contrast, and other best practices, you create an inclusive experience for all users. Use the resources on this page to learn how to make your images and graphics accessible.
Who is responsible?
Anyone who uses images and graphics when developing content for instruction, communication, marketing, promotion, or other academic or business purposes is responsible for ensuring that the content is accessible.
What standards do you need to meet?
All content with images and graphics must comply with the required WCAG 2.1 AA standards. These guidelines are referenced in WMU’s Web Accessibility Policy and in the ADA Title II federal regulations.
What to do? (Checklist)
Use the following best practices to help ensure your images and graphics are accessible to all users.
- Write descriptive alt text: Provide concise, meaningful alternative text for all informational images that describes the content and function. Limit alt text to 125-150 characters when possible, with longer descriptions provided separately for complex images.
- Mark decorative images appropriately: Identify purely decorative images (borders, spacers, design elements) so screen readers skip them.
- Ensure sufficient color contrast: Maintain a minimum contrast ratio of 3:1 for graphical objects and user interface components, and 4.5:1 for text within images against their backgrounds to ensure visibility for people with low vision or color blindness.
- Avoid color-only communication: Never use color alone to convey information. Supplement color coding with patterns, labels, textures, or text to ensure information is accessible to people with color vision deficiencies.
- Provide long descriptions for complex graphics: For detailed charts, graphs, diagrams or infographics, include extended descriptions either in the surrounding text or through a separate linked page.
- Use high-resolution, clear images: Ensure images are sharp and high quality, especially when containing text or important details. Blurry or pixelated images are difficult for people with low vision to perceive, even with magnification tools.
- Include text alternatives for images of text: Avoid using images of text whenever possible. When necessary (e.g., logos, specific design requirements), provide the exact text in the alt text and ensure the image meets contrast requirements.
- Make charts and graphs accessible: Provide text summaries for data visualizations that explain trends, key findings and data points. Consider providing data tables as alternatives to purely visual representations.
- Test images with assistive technology: Ensure images scale properly with browser zoom (up to 200%) without losing clarity or breaking page layout.
What tools are available?
Siteimprove
Siteimprove is a platform that Western uses to help manage and improve our websites by checking for issues in accessibility, quality assurance and SEO.