Mobile Ready Hero Image Guidelines

This page describes guidelines related to manipulating the assets from the front of pack to form the digital pack.

On this page:

When designing the digital pack, it is strongly encouraged that suppliers amplify everything on the front of pack that communicates the 4W’s and omit everything else. Note that this extends beyond text and logos to colour and imagery, which can play an important part in communicating brand or variety.

In the image on the right, both the brand name and product name have been enlarged, and non-4W information (‘hot and fiery’, nutrition data) has been omitted.

Any visual elements (text or graphics) that are added into the digital pack should convey one or more of the 4Ws, and should exist elsewhere on the physical pack.

Front pack assets may be rearranged into any position. However, assets should be kept in roughly the same relative positions as on the physical pack because changing the relative positions is likely to impair recognisability.

Any text that communicates the 4Ws needs to have sufficient contrast difference between the colour of the text and its background. The best method for checking this is the Accessible Perceptual Contrast Algorithm for Lightness contrast (APCA).

This freely available tool can be used to calculate Lightness contrast, using an eyedropper to select the foreground and background colours from an image.

The Lightness contrast can also be evaluated using the Photoshop and PowerPoint versions of Clari-Fi.

The Lightness contrast is reported as a number between 0 and 108.

For text in e-commerce images:

• Lightness contrast greater than 60 = PASS.
• Lightness contrast values between 45 and 60 = BORDERLINE
• Lightness contrast less than 45 = FAIL.

The APCA Lightness contrast is recommended instead of the contrast ratio that appears in the Web Content Accessibility Guidelines (2.2), because the contrast ratio overestimates the contrast of black text on coloured backgrounds, and underestimates the contrast for white text on coloured backgrounds. These different methods for calculating contrast are discussed further in the article titled Does the contrast ratio actually predict the legibility of text.

Text effects like key lines and drop shadows should not be used, they add visual noise to the image, reduce the visual clarity, and make text harder to read.

If the text does not have sufficient contrast against its background, then improving the choice of colours is a much better solution than adding a keyline around the text.

If a pack is white, it is encouraged to represent this in the digital pack using an off-white colour (RGB 253,253, 253), together with a key line. This helps to define the edges of the product and makes it visible against the white background of the retailer’s site.

Adding key lines to products with pale colours is encouraged to assist recognition of their shape.

However, drop shadows and reflections should not be added, as they add visual noise without helping the shopper and break GS1 and Google rules.

When stacking multiple packs on top of each other within a bundle layout, the edges of each pack should be graphically highlighted, in order to help the shopper interpret the image more quickly and easily. This can be achieved either via a key line or a Gaussian blur.