Why Putting Your Feature Image Behind Your Page Heading Is a Web Design Mistake
By Cara Bunda • May 13, 2026 •
By Cara Bunda • May 13, 2026 •
By Cara Bunda • May 13, 2026 • News,
Open almost any website built on a template in the last ten years and you'll find it: a large hero image stretched across the top of the page, and sitting directly on top of it, the page title or blog post heading in white text. Sometimes there's a semi-transparent dark overlay. Sometimes there isn't. Sometimes the text is readable. Often it isn't.
It looks dramatic. It feels modern. Clients frequently ask for it because they've seen it on other sites and associate it with a certain kind of professional aesthetic.
It is, in the overwhelming majority of cases, a bad design decision. Not a matter of taste. Not a stylistic debate where reasonable people can disagree. A demonstrable failure on accessibility grounds, a documented failure on readability grounds, and an increasingly outdated pattern that well-designed sites have been moving away from for good reason.
This post is about why—and what to do instead.
To be precise about the pattern we're describing: a feature image or hero image placed as the background of a page header, with the page title, blog post title, or H1 heading rendered directly on top of it as text. The image might be full-width, it might be contained to a banner area, it might have a color overlay or gradient applied over it. The common thread is that the primary heading of the page—the first and most important piece of information a visitor encounters—is competing visually with a photographic or illustrated background.
This is distinct from a hero section where an image sits adjacent to or below the heading, or where the heading and image are clearly separated by layout. The specific failure mode is text on top of image as the dominant header treatment.
This is the most concrete, least debatable issue with text-over-image headers, and it's the one with real legal and ethical weight.
The Americans with Disabilities Act, as applied to websites through the Web Content Accessibility Guidelines (WCAG), sets specific contrast ratio requirements for text to be considered accessible. WCAG 2.1—the current standard that courts and accessibility auditors reference when evaluating ADA compliance—requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or larger) against its background.
When your heading sits on top of a photograph, the "background" isn't a solid color with a fixed contrast ratio. It's a photograph. Photographs contain dozens, hundreds, or thousands of different color values across their surface. The contrast ratio between your heading text and the image underneath it changes pixel by pixel across the full width of the heading. A white heading might achieve 7:1 contrast against the dark corner of the image and 1.2:1 contrast against the bright sky or light wall in the center of the same frame.
There is no single contrast ratio for text on an image background. Which means there is no reliable way to guarantee your heading meets WCAG contrast requirements when it's placed over a photograph. You can get close on certain images with carefully selected text colors and carefully selected photographs. You cannot guarantee compliance across the full range of display conditions, screen brightness settings, and image rendering variations that real users experience.
The practical consequence: if your site is audited for ADA accessibility—and increasingly, this happens—a text-over-image header is one of the first things flagged. And ADA compliance isn't just a legal checkbox. It determines whether your content is actually readable by the estimated 8 million Americans with low vision, the users relying on high-contrast display modes, and the substantial percentage of users who encounter your site in conditions (bright sunlight, low-brightness screens, aging monitors) that compress perceived contrast significantly.
Set aside compliance for a moment and just think about what it feels like to read text on top of an image.
The human visual system reads text by detecting the edges of letterforms—the contrast between the character and the surface it sits on. When that surface is uniform (a solid color, a flat tone), edge detection is clean and reading is effortless. When that surface is textured, patterned, or photographically complex, the visual system has to do additional work to separate the letterform edges from the background noise. That work manifests as slower reading speed, reduced comprehension, and increased visual fatigue.
This is why professional print design has known for decades that body copy never runs on photographic backgrounds. It's why newspapers run text on white even when photographs dominate the layout. It's why book interiors are printed on off-white paper with high-contrast black ink. The reading experience degrades measurably when text competes with a complex visual background.
Your page heading is the single most important piece of text on that page. It's what tells the visitor they've arrived at the right place. It's what search engines weight most heavily in understanding your content. It's what screen readers announce first. Placing it in the condition least conducive to clean, effortless reading—on top of a photograph—is a design choice that works against the heading's primary function.
The most common response to the contrast problem is to add a dark overlay over the image—a semi-transparent black or colored layer between the photograph and the text. Set the opacity to 40%, 50%, 60%, darken the image enough that the white text reads clearly, and you've solved the contrast problem.
Except you haven't. You've created three new problems.
First, you've obscured the image. The photograph you chose—presumably because it was relevant, beautiful, or meaningful to the page—is now partially hidden behind a dark filter. If the image was worth using, it's worth seeing. A 50% black overlay on a compelling photograph is, visually, a partially compelling photograph. If the overlay has to go above 40% opacity to make the text readable, you should ask yourself whether the image is doing enough work to justify its presence at all.
Second, the contrast problem hasn't been eliminated—it's been averaged. The overlay creates a more uniform background tone, but photographs still contain variation underneath the overlay. Light areas of the image still bleed through more than dark areas. The contrast of your heading text against the underlying image is now filtered through the overlay, but it's still not the consistent, reliable contrast of text on a solid color.
Third, dark overlays over images have become one of the most visually tired patterns in template-driven web design. They were novel in 2014. In 2026 they read as default—the visual equivalent of placeholder content that was never replaced with a real design decision. Well-designed sites have been moving away from this pattern for years precisely because it signals "template" rather than "considered."
Good web design creates a clear hierarchy: the most important element commands the most visual attention, and supporting elements recede in proportion to their relative importance. The heading of a page is the most important element—it orients the visitor, communicates the page's purpose, and anchors everything that follows.
When the heading is placed on top of an image, the heading and the image are competing for the same visual real estate with no clear hierarchy between them. Is the image the hero? Is the heading? The design is trying to do both simultaneously and succeeding at neither.
The image pulls the eye because images are processed faster than text. The heading demands attention because it's text and text carries meaning. The result is a visual tension that requires the user to consciously choose which element to process first—a choice that good design should never ask the user to make. The layout should make that choice obvious.
A heading that sits cleanly above, below, or beside an image has a clear relationship with it. One element is primary. The other is supporting. The visitor's eye knows where to go first and what order to process the information. Text on top of image collapses that hierarchy into visual noise.
A text-over-image header that's been carefully balanced on a desktop layout—the image chosen for its composition, the text sized and positioned to fall over the darker portion of the frame—almost never survives the translation to mobile intact.
On mobile, the image is cropped. The heading is reflowed. The careful relationship between the text position and the image composition is disrupted by the different aspect ratio of the mobile viewport. The text that sat over the dark mountain range on desktop now sits over the bright sky on mobile. The white heading that was readable at 48px on desktop is now 32px on a small screen with less contrast margin to work with. The overlay that looked subtle on desktop looks heavy on mobile because the image has less room to show through.
Responsive design requires that every design decision work across the full range of viewport sizes. Text-over-image headers are one of the design patterns most likely to require separate mobile overrides, additional image crops, adjusted overlay opacities, or complete layout changes for small screens. That complexity is a maintenance burden and a failure mode waiting to happen when content is updated and the new image doesn't have the same composition as the original.
The alternatives to text-over-image headers are not compromises. They're better design.
Separate the heading from the image entirely. Put the page heading in its own content block with a solid or subtly toned background. Put the feature image below it, or in a sidebar, or as a contained element within the page content. The heading is unambiguously readable. The image is unambiguously visible. Both elements do their jobs without fighting each other.
Use the image as a true hero, without text. If the image is compelling enough to dominate the header of the page, let it. A full-width image with nothing on top of it is a powerful design statement. The heading appears immediately below, in a clean content block, with full contrast and full readability. This is the layout pattern used by many of the most consistently well-designed websites on the web, and it looks intentional because it is.
Use typographic headers with color. A heading set in strong typography against a solid background color—using the brand palette deliberately—is often more visually distinctive than any text-over-image treatment. It's faster to load, fully accessible, perfectly readable across all devices, and it creates a consistent, recognizable page identity that doesn't depend on whether the right photograph is available for every page.
Use image as texture, not subject. If you want the visual warmth of an image in the header area, consider using it as a subtle textured element—cropped tightly, reduced in visual prominence, positioned so it clearly frames rather than backgrounds the heading. The heading remains on a surface that meets contrast requirements. The image contributes atmosphere without compromising readability.
The text-over-feature-image header pattern persists because it's available in templates, it looks impressive in design mockups on clean stock photography, and clients who haven't lived through its failure modes don't know to ask for something different.
But web design is not graphic design. A layout that looks striking in a static mockup has to perform across devices, browsers, screen settings, and accessibility tools. It has to remain functional when the content is updated, when the image changes, when a new team member uploads a different photograph that doesn't have the same composition as the original. It has to be readable by users with low vision, by users in bright sunlight, by users on aging monitors. It has to pass the contrast checker, the screen reader test, and the five-second readability test from across the room.
Text-over-image headers fail enough of those tests often enough that the pattern should be the exception—used only when specific conditions are carefully controlled—not the default that fills every page template.
Your heading deserves to be read. Design it so it can be.
At MOJO Creative Digital, we design websites with accessibility, readability, and real-world performance built into the foundation—not added as an afterthought. If your current site has accessibility issues, readability problems, or design patterns that look good in mockups but fall apart in production, we'd like to take a look.
Request a Quote at mojo.biz/request-a-quote
4157 Mountain Rd. #240, Pasadena, MD 21122 (410) 439-1994
A feature image header—sometimes called a hero image header—is a design pattern where a photograph or illustration is used as the background of the top section of a page, with the page title or H1 heading rendered directly on top of it as text. It's common because it's the default treatment in most website templates and page builders, it looks visually impressive in static design mockups, and clients who haven't encountered its failure modes in production tend to associate it with a polished, modern aesthetic. The pattern spread rapidly during the template-driven web design boom of the early 2010s and has persisted largely through inertia rather than merit.
WCAG stands for Web Content Accessibility Guidelines—a set of internationally recognized standards developed by the World Wide Web Consortium (W3C) that define what it means for web content to be accessible to people with disabilities. WCAG 2.1 is the current version most widely referenced in ADA compliance evaluations, legal proceedings, and accessibility audits. It matters for your website because courts in the United States have increasingly interpreted the Americans with Disabilities Act as applying to websites, and businesses that fail WCAG standards have faced lawsuits, demand letters, and costly remediation requirements. Beyond the legal exposure, WCAG compliance is a baseline measure of whether your site is actually usable by the estimated one in four American adults who live with some form of disability.
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 between text and its background for normal-sized text, and 3:1 for large text defined as 18 point or larger for regular weight, or 14 point or larger for bold weight. These ratios are measured on a scale where 1:1 is no contrast at all (identical colors) and 21:1 is maximum contrast (pure black on pure white). The problem with text on a photographic background is that the background color value changes across every pixel of the image, making it impossible to calculate or guarantee a single contrast ratio across the full heading. Tools like the WebAIM Contrast Checker can evaluate contrast ratios for solid color combinations—but they cannot evaluate text on image backgrounds reliably because there is no single background value to measure against.
Not reliably. A dark overlay improves average contrast by pushing the image toward a more uniform dark tone, but it does not eliminate the underlying variation in the photograph beneath it. Light portions of the image still bleed through more than dark portions, meaning contrast still varies across the heading. The only way to guarantee WCAG-compliant contrast is to place text on a solid, uniform background with a known color value that can be measured against the text color precisely. An overlay is a partial mitigation, not a solution—and it comes with the additional cost of obscuring the photograph you chose to use.
In very controlled circumstances, yes—but the conditions required are strict enough that it rarely makes practical sense for a general website header. You would need an image with a genuinely uniform background in the area where the text appears (a solid-color wall, a clear sky without variation, a flat texture), you would need to verify the contrast ratio of your specific text color against the specific color values in that image region, and you would need to ensure that image replacement or content updates never introduce a different image that disrupts that carefully established contrast. For a one-off designed graphic where the image and text are fixed together as a single asset, this can work. For a dynamic website header where the feature image changes post to post and is often selected by a non-designer, it cannot.
Desktop and mobile layouts use different viewport dimensions, which means the image is displayed at a different aspect ratio and crop on each. A photograph carefully chosen for a desktop header because the composition places the darkest region in the center—exactly where the heading text will appear—may be cropped to a square or portrait orientation on mobile, moving the text over a completely different and potentially much lighter region of the image. Additionally, heading text that was sized generously on desktop is often significantly smaller on mobile, giving it less contrast margin to work with. Responsive web design requires that every design decision function across all viewport sizes, and text-over-image headers are uniquely vulnerable to breaking during that translation.
The direct SEO impact is limited—Google can read text rendered in HTML regardless of what's behind it. The indirect impact is more meaningful. Page speed is affected by large hero images, particularly when they're not properly optimized for the web. User experience signals—time on page, bounce rate, engagement—can be negatively affected if the heading is difficult to read and visitors don't immediately understand where they've landed. And accessibility failures can affect how Google evaluates the overall quality of a page's user experience, which is increasingly factored into rankings through Core Web Vitals and page experience signals. A heading that's clear, readable, and immediately communicates the page's topic is better for users and for search visibility simultaneously.
Visual hierarchy is the principle that elements in a design should be arranged so that the most important information is visually dominant and the user's eye naturally moves through the content in the order it needs to be processed. In a web page, the heading is almost always the most important element—it orients the visitor and anchors everything that follows. When the heading is placed on top of a photograph, both the image and the heading are competing for visual dominance in the same space. Images are processed faster than text by the human visual system, so the eye is drawn to the photograph first—which is backwards. The heading should win that competition because it carries the meaning. Clean separation of heading and image, with the heading in an unambiguous position of prominence, restores the hierarchy that good design requires.
Any website where the page heading carries critical information—medical, legal, government, financial, nonprofit, healthcare, and professional services sites—faces greater consequences when that heading is harder to read. These are also the categories most likely to be visited by users with accessibility needs, and most likely to face ADA compliance scrutiny. Beyond specific industries, the problem is most acute for blog and news sites that use dynamic feature images that change with every post—the conditions under which any given heading will appear against a background are essentially unpredictable across the full range of content, which makes consistent compliance impossible to maintain manually.
The most direct method is to open your website and look at any page with a feature image header. If your page title or H1 heading is sitting on top of a photograph, the pattern is present. To evaluate the severity, you can use a browser-based accessibility tool like the WAVE Web Accessibility Evaluation Tool (wave.webaim.org) or Axe DevTools to run an automated accessibility audit, which will flag contrast failures among other issues. For a more thorough evaluation—including manual testing that automated tools miss—a professional accessibility audit is worth commissioning before a compliance issue becomes a legal one. MOJO includes accessibility evaluation as part of our website design and audit process.
Ask them to separate the page heading from the feature image entirely so that the heading sits on a solid background with a guaranteed contrast ratio, and the image appears as a distinct visual element below, beside, or within the page content. Ask them to demonstrate that the heading passes WCAG 2.1 contrast requirements at a 4.5:1 ratio by testing it with a contrast checker tool. Ask them to show you how the layout looks on both desktop and mobile before finalizing the design. And ask them to confirm that the heading is the first element a screen reader would announce on the page—if it isn't, the reading order needs to be corrected. These aren't unreasonable requests. They're baseline standards for a professionally built website in 2026.
Yes. Website accessibility audits and remediation are part of MOJO's web design and development services. We evaluate existing sites against WCAG 2.1 standards, identify specific failures including contrast, reading order, alt text, keyboard navigation, and heading structure, and provide a prioritized remediation plan. For sites that need more than piecemeal fixes, we design and build from the ground up with accessibility baked into the foundation rather than patched in afterward. Request a quote at mojo.biz/request-a-quote and we'll take a look at where your site stands.
