Placing text over images is a common practice in modern UX/UI design. However, while this trend can enhance a website’s aesthetic appeal, it can introduce accessibility barriers for users with disabilities—and legal challenges for website owners.
Ensuring that designs incorporating text over images are accessible is crucial for providing an inclusive user experience. It’s also key to conforming with standards like the Web Content Accessibility Guidelines (WCAG) and complying with laws like the Americans with Disabilities Act (ADA). In this article, we’ll delve into the impact of this trend on accessibility, tips for making text readable on images, and tools that can help you keep your designs compliant.
Accessibility challenges posed by text over images
For designers, positioning text over photos or background images can be a creative way to display information, particularly on web pages and ads. However, this trend can create barriers for users if accessibility isn’t considered. For example, users with visual and cognitive disabilities may struggle to read text over images when inclusive design practices aren’t applied.
The following accessibility issues are often introduced by text over images:
1. Poor contrast:
One of the most common problems with text-over-image designs is that the text and background lack sufficient color contrast. This can make it difficult for users with low vision or color blindness to read the text.
2. Complex backgrounds:
Busy or high-contrast background images can make text hard for users to distinguish.
3. Responsive design issues:
When text-over-photo designs are not optimized for different screen sizes, the text may become unreadable on smaller devices.
WCAG and ADA compliance for text over images
The WCAG Success Criterion 1.4.5: Images of Text states that text should not be presented as part of an image unless it’s essential to the information being conveyed. That’s because screen readers are unable to interpret text that’s part of an image. Organizations aiming to conform with WCAG should avoid placing text in or over images, unless doing so is absolutely necessary.
Conforming with WCAG is required by Title II of the ADA, which applies to state and local governments. It’s also a best practice for compliance with Title III of the ADA, which covers public accommodations, like private businesses. So, organizations should aim to avoid using images of text—including designs that involve text over images—to mitigate ADA compliance risks.
How to make text readable on images
While WCAG recommends avoiding the use of text over images in most cases, if doing so is essential, the following best practices can improve the accessibility of these designs:
- Use sufficient color contrast: Ensure there’s enough contrast between the color of the text and the color (or colors) of the background image. WCAG recommends a contrast ratio of at least 4.5:1 for regular text and 3:1 for larger text. Use a contrast checker tool to verify conformance.
- Add a text overlay: Place a semi-transparent overlay (e.g., a dark or light layer) between the background image and the text. This improves readability by reducing the complexity of the background.
- Choose simple backgrounds: Opt for background images with simple patterns to make it easier for users to focus on the text.
- Use large, legible fonts: Select fonts that are easy to read and ensure the text size is large enough to be legible on all devices.
- Provide alternative text: Always include alternative text (alt text) for images, including images with text overlays. Alt text allows screen readers to convey key information about an image to users.
Test with accessibility tools: Spot-check your designs with an image accessibility checker or ADA compliance image checker. Even better, engage an accessibility expert to evaluate your designs for issues with contrast and readability.
Tools to improve image accessibility
The following tools and services can help you evaluate and improve the accessibility of designs that include text over images.
- Contrast checker: Tools like WebAIM’s contrast checker or the contrast checker feature in design software like Figma or Adobe XD can help you verify that your text-over-photo designs meet WCAG standards.
- Image accessibility checker: An image accessibility checker can analyze your background image with text overlay and provide recommendations for improving accessibility.
Screen reader testing: Test your designs with screen readers like NVDA or JAWS to ensure that graphics include alt text that accurately conveys any text over images.
Additional UX design best practices for accessible text over images
UX and UI teams aiming to design with accessibility in mind should consider these additional best practices with regard to using text over images.
- Prioritize accessibility: When designing background images with text overlays, prioritize accessibility over aesthetics. Ensure that all users, including those with disabilities, can access and understand the content.
- Use responsive design: Verify that text-over-photo designs are compatible with all screen sizes. Test your designs on different devices to ensure readability.
- Provide multiple formats: If using text over images is essential, consider providing the same information in an alternative format, such as plain text or a caption.
- Educate your team: Ensure that your design and development teams are aware of WCAG and ADA guidelines. Provide training on accessibility best practices.
Aesthetics shouldn’t compromise accessibility.
Placing text over images can enhance the visual appeal of your website, but aesthetic choices shouldn’t come at the cost of accessibility. By conforming with WCAG, using tools like a contrast checker and image accessibility checker, and enlisting the help of accessibility experts, you can create designs that are both beautiful and inclusive.
Remember, digital accessibility is not just a legal requirement—it’s a commitment to creating a web that is usable by everyone. By using text over images sparingly and prioritizing accessible design, you can ensure that all users enjoy a seamless experience.
