Website Hero Images

OVERVIEW
Garrett's Corporate Website hero images placed white foreground text directly over light-coloured background imagery, producing contrast ratios that fell short of WCAG 2.1 AA. The problem got worse as the viewport shrank: on small desktops, tablets, and mobile, the layout compressed in ways that made the text even harder to read against the image beneath it.
OBJECTIVES
Redesign the hero image template to meet WCAG 2.1 AA contrast requirements (4.5:1 minimum for body text) across every breakpoint, while preserving Garrett's existing brand identity and shipping within the existing site architecture, with no rebuild of the underlying page required.
rolE
Sole designer on this initiative. Led the accessibility audit, designed and iterated the new hero template, and partnered with one front-end developer to implement it across desktop, tablet, and mobile.
TIMELINE
2 months
KEY RESULTS & IMPACT
The redesign moved the page title and introductory copy off the background image entirely, onto a solid white panel — resolving contrast ratios that had dropped as low as 1.1:1 against the image and replacing them with a fixed pairing that clears WCAG 2.1 AA's 4.5:1 minimum for body text. This fix was applied consistently across the Turbo Replacement hero and all eight Technology page heroes, at desktop, tablet, and mobile breakpoints.

DESIGN PROCESS
1. Research: Audited the existing hero images against WCAG 2.1 AA contrast requirements using a contrast checking tool, confirming that white text over light background imagery fell below the 4.5:1 minimum, particularly at small desktop, tablet, and mobile breakpoints. Benchmarked how comparable industrial and automotive brands solved similar text-over-image contrast problems.
2. Ideation & Conceptualisation: Explored layout concepts that separated text from background imagery entirely, rather than relying on overlays or gradients, so contrast compliance held regardless of the underlying product photo.
3. Design Execution: Built the visuals in Adobe Photoshop, placing page titles and body copy on solid colour panels and checking each layout against the 4.5:1 contrast ratio before moving forward.
4. Feedback & Iteration: Gathered stakeholder feedback on the initial designs and revised the work to keep every version within WCAG 2.1 AA thresholds while staying aligned with the project objectives.
5. Finalisation & Implementation: Finalised the visuals and partnered with a developer to implement the redesigned hero images, confirming contrast compliance and technical consistency across devices and screen sizes.
Previous Garrett Turbo Replacement hero image when viewed on desktop
Original Garrett Turbo Replacement hero banner on desktop, with the white page title and body copy overlaid directly on a dark, low-contrast background image of smoke and a turbocharger.

Original Garrett Turbo Replacement hero image on desktop. The white text sits directly on the product photo, so wherever it crosses a brighter area of the image — the chrome highlight on the turbo housing or the light blue smoke plume — contrast collapses to as low as 1.1:1, far under the 4.5:1 minimum for body text.

Previous hero image with poor contrast when viewed on a tablet​​​​​​​
Original Garrett Turbo Replacement hero banner on a tablet, with the white page title and body copy overlaid directly on a dark, poor-contrast background image of smoke and a turbocharger, and the navigation collapsed into a menu icon.

Original Garrett Turbo Replacement hero image on a tablet. The same text overlaps those bright highlights in the photo, dropping to contrast ratios as low as 1.1:1 and 2.46:1 — both well under WCAG 2.1 AA's 4.5:1 minimum for body text.

Redesigned hero image with improved contrast between page title and introduction copy
Redesigned Garrett Turbo Replacement hero banner, with the page title and introduction copy placed on a white background on the left, and the turbocharger product photography repositioned onto a separate blue, hexagon-patterned background on the right.

Redesigned Garrett Turbo Replacement hero image with improved contrast, separating the page title and introduction copy from the background imagery to enhance readability.

Redesigned hero images for Garrett's Technology pages (Medium/small desktop)

The original Technology pages shared the same low-contrast pattern as the Turbo Replacement hero, white page titles and body copy set directly over busy product photography, so the same redesigned, contrast-compliant template was applied across all eight pages. The design incorporates the Garrett brand element of the angle shape with the product overlaid on top.
Redesigned Garrett Technology page hero banners for medium and small desktop screens, stacked for Commercial Vehicle Turbochargers, Award-Winning E-Turbo Innovation, Fuel Cell Technology, 48V Electric Compressor for Mild Hybrid Vehicles, Vehicle Cybersecurity Solutions, Gasoline Turbochargers, Diesel Turbochargers, and Hydrogen Internal Combustion Engine (H2ICE), each pairing a product photo with a red angled brand shape.

Redesigned hero banners for Garrett's Technology pages at medium and small desktop sizes, applying the same title-and-copy-with-product-photo layout across all eight Technology topics.

Redesigned hero image for Garrett's Technology page (Tablet)
The layout was redesigned for a responsive view to position the title and introduction copy below the image. 
Tablet screenshot of the redesigned Garrett Gasoline Turbochargers page, showing a turbocharger and red SUV hero image positioned above the page title, description text, and a Watch Webinar button on a white background.

Redesigned Garrett Gasoline Turbochargers page on tablet, with the title and introduction copy repositioned onto a white background below the hero image for improved contrast and readability.

Redesigned hero images for Garrett's Technology pages (Mobile)
Mobile hero image for Garrett's Gasoline Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Gasoline Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Diesel Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Diesel Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Commercial Vehicle Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Commercial Vehicle Turbochargers page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Award-Winning E-Turbo Technology page, with the page title and introduction copy positioned below the image.
Mobile hero image for Garrett's Award-Winning E-Turbo Technology page, with the page title and introduction copy positioned below the image.
↑Back to Top