In Part 2 of this series, Hannah Milan provides a detailed review of various techniques for designing accessible text over images in web and mobile app content. The article covers techniques such as framing the image, using soft-colored gradients, adjusting text styles and positions, incorporating solid color shapes, and utilizing colored backgrounds. The emphasis is placed on the importance of considering accessibility from the start of the design process rather than as an afterthought.

The text over images design pattern involves placing text on top of images to provide information or serve as website navigation. However, this technique can compromise legibility and readability if there isn’t enough contrast between the text and the image. Designers must ensure a high contrast ratio between the text and image to maintain legibility. Additionally, the text should be positioned away from any elements that may cause confusion or distraction.

The article then goes on to review five more techniques, including framing the image, using soft-colored gradients, adjusting text styles and positions, incorporating solid color shapes, and utilizing colored backgrounds. Each technique is accompanied by examples from real websites.

The author also suggests using actual text instead of text over images to ensure maximum accessibility. Real text can be zoomed in without distortion and can be read by assistive technology software. It also allows for easy contrast adjustment and styling using CSS.

The article concludes by emphasizing the importance of considering accessibility from the start of the design process and provides additional resources and tools for creating accessible text over images.