Always ensure that your most important information is easy to read. If users can’t read text on top of images, they are more likely to skip over your content.
Some organizations go beyond layering text directly on photography to also include functionality. In this example, Samsung uses a text-based tab switcher directly on the background photo. This is problematic because information is buried beneath a tab that isn’t visible.
Another trend that’s becoming increasingly prevalent is text on immersive full-screen video. Again, in theory, this sounds and initially seems eye-catching and visually striking. But in practice, not only is the key message lost, but the navigation is also compromised. The strokes on the navigation menu are too thin to be visible against the light grey background. The white text of the search text and line are lost. And finally, the login and help options blend right into the background. This leaves the user near helpless if it weren’t for the accessibility controls, but you must change the experience for yourself to make it accessible.
Photography, colour and illustration hybrid
Casper weaves together photography with background colours and illustrations to create generous space for text to exist without risking overlap with the photographic elements across all breakpoints. This effectively provides the best of both worlds: the photography elegantly frames the content, drawing the user in and anchoring the focus on the text. They also ensure that white text sits on darker backgrounds; where text overlaps with a light background, it changes to a darker colour.
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.