Framing Images With Flat Colors

One of the simplest methods for keeping text legible is to frame the image within a flat-colored shape that also carries the text. This pattern appears frequently in thumbnails and card-based layouts, where the image and its associated label need to feel like a single unit.

Two ‘try this’ examples next to each other, each one displaying a card component: an illustration in the top section of the card, text in the bottom section, and the illustration and the text are encompassed by a frame with rounded corners
Frame that image — try this option! Your text over (or rather, next to) the images will be perfectly accessible by using a frame or some solid colors contained within the image. This technique is used very often when creating card components. (Image credit: Photo by Google DeepMind on Unsplash) (Large preview)

Real-world implementations can be seen on the July Fund site, which applies the framing approach to its mission cards.

A parallax website that uses card components with images and a frame that image design techniques to position the texts
The July Fund website uses the frame that image technique, with different passing backgrounds and text colors. (Large preview)

ABL Space Systems uses a similar device to keep its technical copy distinct from the photography behind it.

A three-card component is laid out with images and text. The image is individually framed on a white background so that the text over it will be more readable. A snow-covered mountain photo serves as a background for the three-card component
Your image stands out more if you position it in a way that does not require any special editing or additional manipulation. Such is the amazing example from the ABL Space Systems website, which uses a grid layout and the frame that image design technique. (Large preview)

If you are exploring this layout direction, two resources worth studying are Bento Grids — a curated set of tile-based layouts popularized by Apple that organize key takeaways visually — and Godly’s grid-style website collection, which aggregates strong examples of grid-driven design.

Working With Soft-Colored Gradients

When the standard black or white gradient overlays clash with your visual style, the soft-colored gradient alternative can be effective. This technique blends two or more colors into a gentle transition, and it is widely used in modern site and page designs that want a creative edge without losing readability.

Try This and Avoid This examples for accessible text over images design technique, with the left side containing an example of what to try, such as soft-colored gradient colors below the text, and the right side showing an example of what to avoid. The text reads, ‘City life.’ (headline) and ‘Top 10 most busiest city.’ (description).
On the left is an example that uses the soft-colored gradient design technique. You can notice that the text is easily readable and has perfect contrast in relation to the background photo. (Image credit: Photo by Simone Hutsch on Unsplash) (Large preview)

Porto 128 demonstrates this approach on its product pages.

Hero image of the Porto 128 template that uses a soft-colored gradient from the bottom side to make the text readable and accessible. The text is positioned in the middle and reads ‘Welcome to Grand Residence Boutique Hotel’
The subtle placement of a soft-colored gradient from the bottom side makes the Porto 128 website design template headline stand out and be more readable. (Large preview)

Perfect Day also relies on colored gradients to preserve contrast between its copy and background imagery.

The Perfect Day hero image with a soft-colored gradient overlay effect positioned from left to right. The gradient overlay effect colors go from orange to yellow and green and blend with the hero image (a girl smelling a yellow flower). The headline says, ‘In a more compassionate world, everything is better.’ The sub-heading says, ‘We have an opportunity to make the brightest future a reality. For all of us.’
Perfect day’s header image uses a soft-colored gradient overlay that perfectly blends with the image and makes the text accessible and easy to read. (Large preview)

Several generators can help you tune these gradients, including the Gradient Maker from Angry Tools and the CSS Gradients Generator from Designstripe.

Adjusting Typography And Placement

Meeting the WCAG 1.4.3 contrast minimum can still fail even after trying overlay, scrim, or strip techniques. In those scenarios, one of the safest paths is to change the text style and to position the text outside the image area entirely.

Typography tweaks — larger or smaller sizes, bold versus light weights, adjusted margins and letter spacing — can be layered to create impact while keeping the text fully accessible. Placement also gives you flexibility: text at the top, bottom, left, or right of an image can shift the reading experience. When the text sits outside the image boundary, you also gain the benefit of true text that can be zoomed and read by assistive technology.

Try This for Accessible Text Over Images design techniques with both the left side and right side containing an example of what to try using different text styles and text positions. On the left side, Try this example text is positioned at the bottom of the framed image, and on the right side, Try This example text is positioned at the top of the framed image
Different examples of what to try when using different techniques related to the positioning of text, such as text positioned on empty spaces with solid backgrounds. (Image credit: Photo by Tyler Casey on Unsplash) (Large preview)

Bolimówek pairs large typography with imagery to guide the user.

A screenshot of the Bolimówek website that uses a text over image design technique, such as using Copy space to position the text outside of the background image and playing around with text-aligned styles
A very good example of this technique can be seen on the Bolimówek website. It uses empty space, and the text is positioned outside of the header photo and left-aligned. (Large preview)

My Toronto Condo positions its header text clear of its leading photographs.

My Toronto Condo website screenshot shows that accessibility and aesthetics can go together. In the example, on the left is a photo (tall buildings at the rear; green trees at the front), and on the right side is the text and call-to-action that are well placed, with enough contrast between the font and the white background. The title reads ‘Exceeding Your Expectations,’ and the sub-heading reads ‘Christopher’s unrivaled market knowledge and experience in the Toronto real estate market continually achieve record sales prices.’
Another example of playing with text styles and text position is from the My Toronto Condo website, where the half image/half solid background technique is used. The text is on the right and balances perfectly with the header image on the left. (Large preview)

Scribely also manages the balance between image focus and text prominence.

Scribely website screenshot of their hero image that uses the well-placed image and text on the left side. The text reads, ‘Accessible digital content created by humans for humans.’
The Scribely website demonstrates that accessibility and aesthetics can go hand-in-hand, and not only that, but they are also correctly adding detailed Alt text descriptions to their images. Here the photo is on the right, and the text is on the left, creating a good balance. (Large preview)

Chris Coyier’s CSS-Tricks article "Design Considerations: Text on Images" is a useful reference for this topic.

Relying On Solid Shapes

Sometimes a single solid shape is all that is required. The key is to create harmony between the text color and the shape used as its background. Once that balance is found, readability improves markedly without any additional treatment.

‘Try this’ examples for accessible text over Images design techniques, with both the left and right sides containing an example of what to try by using playful, different shapes. On the left side of Try This example, the text is positioned at the bottom over a slightly distorted rectangle; the text over the colored shape reads ‘Art Through The Glass’. On the right side of Try This example, the text is positioned at the center over a dark-red ellipse shape; the text over the dark shape reads ‘Currently reading The Future.’
The use of simple shapes in order to make your text easier to read is another design technique you can practice. (Image credit: Photo by Imani Bahati on Unsplash and illustration by Milad Fakurian on Unsplash) (Large preview)

The Female Gaze is a good example of this technique in practice.

A screenshot of the hero image of The Female Gaze website that uses a playful shape design technique to display their headline text
The Female Gaze website uses a playful shape in the form of a torn paper effect which looks perfectly placed together with the website’s headline. This example clearly shows that you can play around with different colors and shapes as much as you want, and in the end, you will still achieve perfect text contrast and readability. (Large preview)

Pantoute also uses bold color blocks behind its text to keep copy readable.

A screenshot of the Pantoute website that displays the use of playful solid color shapes to emphasize the text on top of them
When combined with a colored background and shapes, you will get a type of website header that stands out, such as in this example from the Pantoute website. (Large preview)

If you want to dig deeper into why this works, three reads are particularly relevant: Rob Postema’s piece on "the psychology behind shapes and colors," Pranav Ambwani’s guide on "turning color theory into CSS," and Canva’s "guide to background design".

Choosing Colored Or Gradient Backgrounds

If none of the overlays or placements work, you can always drop the image and use solid colored backgrounds or gradient backgrounds instead. This ticks the contrast boxes and gives screen readers real text to parse, which is preferable for visually impaired users. With this approach you also gain full control over text size, screen optimization, and zoom without any image quality loss, and you can adapt colors or styles to meet user preferences.

Try This for Accessible Text Over Images design techniques with both the left side and right side containing an example of what to try using colored gradient backgrounds. The text overlaid on a colorful gradient background reads, ‘Health topic today Digital Biology’
An example of Try This and Avoid This with text overlaid over a colorful gradient background. (Large preview)

Bou demonstrates this with its full-width colored sections.

A screenshot of a webpage with text overlaid on a colorful gradient background. The text in black reads, “Call it like it is. We are marketers, designers, writers, and developers. Shaped by tech
An example of using text overlaid over the colored gradient background from Bou website. (Large preview)

Studio 5B uses a palette of flat colors behind its content blocks.

A screenshot of Studio 5B’s homepage that has text overlaid over a dark background. The heading text (in white letters) reads ‘We design people-centric healthcare experiences’ placed over a dark gradient background
Another example of text overlaid over a colored gradient background is from Studio 5B’s website. (Large preview)

Koryun takes the gradient route with deep color transitions behind its typography.

Screenshot of the Koryun design agency website, with perfect contrast between the dark-colored text and the lighter-colored red background. The heading reads, ‘Elevating user experience to new heights,’ and the sub-heading reads, ‘We're a UX/UI agency that designs beautiful user interfaces & experiences.’
In the example of the Koryun UX design agency website, you can see a perfect contrast between the dark-colored text and the lighter-colored red background. No special images are used in the example. (Large preview)

For implementation, the CSS Gradients Generator is handy, and Sarah Fossheim’s tutorial "How to add a gradient overlay to text with CSS" is worth a bookmark.

Preferring Real Text

Across all ten techniques reviewed in this series, the most dependable choice remains using actual text. Text over images adds a natural benefit in visual storytelling, but small text over busy imagery can become compressed and unreadable for those with low vision. When you need to meet WCAG 2.1 contrast requirements reliably, skipping the image overlay and using real text is the best path — it guarantees contrast, supports zoom, and works with assistive technologies out of the box.

Why Real Text Wins

When you lay text over an image, the most accessible choice is to use actual text rather than flattening it into the image itself. Real text scales cleanly at any zoom level without pixelation, and screen readers and other assistive technologies can parse it directly. It also gives you full control over contrast and styling through CSS, so you can adjust the presentation to keep content legible without touching the image file.

For a deep dive into the CSS side of this pattern, Ahmad Shadeed’s tutorial, “Handling Text Over Images in CSS,” walks through practical techniques for positioning and styling text over imagery.

Keep Accessibility In From The Start

Accessibility should be baked into the design process, not retrofitted at the end. Every decorative choice — overlay opacity, gradient placement, font weight — has an impact on whether users can actually read the message. Treating those decisions as part of the core design work, rather than a QA checklist item, produces better outcomes for everyone.

Tools For Checking Your Work

Several utilities can help you validate contrast and overlay choices while you design:

Further Reading On Accessible Imagery And Color

If you want to go deeper, the following resources cover the surrounding topics of contrast, color theory, and accessible markup:

On documentation and annotation workflow:

For color and contrast foundations, including WCAG’s 1.4.3 Contrast (Minimum) criterion, see these articles:

Smashing Magazine also maintains curated topic pages on Accessibility, Usability, and UX.

Smashing Editorial (yk)