Don’t add text to images on websites. Text that is part of the image can’t be read by screen readers, it isn’t responsive and, ultimately, it isn’t accessible.
Photography blending and blur
In this example, Casper exaggerates the blurred foreground in the photo to ensure there’s sufficient context even though the text is overlaid directly on the photo itself. Upon close inspection, the blur likely takes liberty with photographer’s intent, but by exaggerating the existing blur, it still feels natural. In almost all cases where blur is applied, it’s on the portion of the photo that is not important, so it doesn’t take away from the overall experience. Instead, it brings focus to the overall concept, figuratively and literally.
Cutout and colour blocking
With this technique used by lululemon, there’s a shift away from edge-to-edge photography and the background colour of the page extends into the photo area, creating a cutout effect. This achieves something very similar to the previous examples where the cutout creates visual prominence and helps draw the eye to the text area. It also allows for very high contrast between the text and the light background colour, offering the most accessible experience so far.
Our recent work with Toronto Pearson
Similar to the lululemon example, our work on the recent Toronto Pearson website redesign applies the colour blocking technique. Instead of the cutout approach, we’ve applied edge-to-edge photography for a more immersive initial experience to draw the visitor in. We’ve still applied the same technique of using the page background colour, in this case white, so that again, there’s very high contrast maintained between the text and background.
Accessible modern SharePoint intranets
Accessibility is also top of mind when we design intranets.
When building SharePoint intranets, we start with Microsoft’s theme designer to choose a colour palette that meets our accessibility standards. The built-in accessibility checker makes it easy to verify that the primary colour, text colour and background colour work together from an accessibility standpoint.
We designed GO modern web parts for accessibility. On the home page, we’ve made sure that any text overlaying images appears in a white box, so it’s always easy to read.
It’s a design pattern that we repeat in news roll-up cards, too, so text is never overlapping an image.
While we’ve only highlighted a few examples, we hope this begins to break down the myth that designing for accessibility means compromising on design aesthetics and what we associate as visually pleasing. Using these techniques, among many others, you can create something beautiful, usable and accessible and ultimately, make the experience better for everyone using your website.
Sorry, we couldn’t find anything that matches your search.