Improving Accessibility for Overlay Cards in Verso

The Overlay Story Card is a widely used design pattern across multiple brands including Vogue, Bon Appétit, GQ and Traveller. It has an image background with a dark gradient overlay, topped with a story title, metadata, and sometimes a byline. It’s a visually engaging layout, but without careful attention to contrast, alignment, and image balance, it can harm accessibility and usability.

This article explains how I identified key problems, what changes we made, and the color contrast theory that informed those changes.

The Problem

The Overlay Story Card is a design pattern where a story title and details are placed on top of an image with a black gradient overlay.

In the current implementation:

• The background overlay takes fixed height from bottom, fading from 80% black to 0% from bottom to a fixed height.

• This style is used in several recirculation list and story collection components across our brands.

However, during an accessibility review, it became clear that critical improvements were needed.

My role

My role was to identify the accessibility gaps, propose a solution for improving text legibility, and work closely with design and engineering teams to bring the changes into the Verso Design System. I ensured the final implementation balanced accessibility standards with the visual expression of brands like Vogue, Bon Appétit, and GQ.

Identifying the Issues

1. Legibility Problems

On smaller screens, the gradient fades too quickly, reducing opacity near the top.

Since the story title gets placed towards the top/middle of the image, the text often overlaps with lighter areas of the background image, making it harder to read and failing accessibility contrast checks.

2. Image Visibility Loss

The rubric, title, and byline collectively cover more than half of the image, which hides too much of the visual content and reduces its impact.

3. Content Scannability

Center-aligned text interrupts natural reading flow. Each new line forces the reader to pause and find the starting point, slowing down scanning speed.

Approach to Fixing It

The initial proposal was to replace the overlay approach with a stacked card design. This would have eliminated all of the accessibility issues we identified. However, maintaining the visual language was critical—our brands needed the solution to stay closely aligned with their established identity. So we explored alternative solutions that would address accessibility issues while preserving the brand’s visual expression and user experience.

We ran the numbers to understand how to eliminate the accessibility issue. Since the lightest possible background in an image can be pure white, we used that as the baseline for testing. If white text can achieve sufficient contrast on top of pure white with an overlay, it will be legible on any other surface as well.

For white text (#FFFFFF) to meet WCAG AA (4.5:1) against a pure white background (#FFFFFF), a black overlay of at least 53.47% opacity is required. To meet the stricter WCAG AAA (7:1) standard, the overlay must be at least 65.08% opacity.

The problem with the old gradient was that it faded too quickly to lower opacity levels, making it impossible to consistently guarantee these contrast thresholds wherever text appeared.

1. Gradient Overlay Applied to Text Layer

To ensure white text consistently meets accessibility guidelines, we refined how gradients were applied:

• Instead of relying on the card’s fixed background, the gradient was applied directly to the text layer wrap.

• This made the gradient independent of text height, ensuring both short and long headlines remain equally readable.

• Within the text wrap, the gradient now ranges from 90% to 55% black, guaranteeing white text always passes WCAG AA contrast standards.

• On top of this, we added a fixed gradient from 55% to 0%, preserving the smooth visual fade while maintaining legibility.

An illustration showing how the new implementation works

2. Increased Image Ratio

We recommended brands to use image height for mobile and tablet breakpoints by shifting the aspect ratio to atleast 1:1. This would more be a brand decision based on their text length.

This allows more of the image to be visible, improving visual storytelling without sacrificing legibility.

3. Left-Aligned Content

All overlay text is now left-aligned to improve scanning.

This aligns with common reading patterns, allowing users to quickly find the start of each new line without extra visual effort.

Screenshots from Vogue and Bon Appétit showcasing the updated design changes

Outcome

By rethinking the gradient application, adjusting the image ratio, and improving text alignment, the Overlay Story Card is now:

• Accessible across devices and image types

• Visually balanced with improved image visibility

• Faster to scan and read, enhancing the overall user experience