How to Choose Background Colors That Make White Products Easy to See on E-commerce Sites

When a white sneaker is displayed on an e-commerce site—an online shop—a white photographic backdrop may cause its laces, sole, and outer edges to blend into the image. Simply making the entire backdrop dark is not always the answer. To show the product’s shape and texture without misrepresenting its original white color, consider background brightness, lighting, and the way the photograph sits on the webpage separately.

Try a light-gray background for white products, and preserve natural shadows

White products and pure-white backgrounds can have similar brightness, making their boundaries difficult to distinguish. A light, nearly neutral gray is one possible backdrop because it creates some separation without introducing a strong competing hue. However, a white fabric, leather panel, and rubber sole reflect light differently; an actual sneaker is not uniformly pure white. Soft light from an angle and a natural contact shadow under the sole can reveal its shape without changing the product’s real color.

Too much exposure can erase stitching and fine surface texture from a white item. Conversely, choosing a very dark background just to make its silhouette visible can change how the whiteness and overall image are perceived. Photograph the same item against white and light gray, then compare which approach better preserves both the outline and material details.

Example palette for a white sneaker listing and product-detail page

The backdrop inside a product photograph is different from the webpage background around that image. The examples below assume the sneaker itself can be photographed or edited without recoloring it. HEX is a hexadecimal code used to specify web colors; a contrast ratio compares the relative brightness of two colors.

• Background in the main listing photo: Try a very light, cool-leaning gray ■#E1E7EB behind the white sneaker. Its calculated contrast against pure white ■#FFFFFF is about 1.25:1. This is only a comparison between solid color swatches, not a measurement of the actual pixels on the shoe. Keep a natural shadow where the shoe touches the surface, and check whether the sole and white laces remain distinguishable.
• Secondary photo for close-up details: A slightly deeper neutral gray ■#CED6DC is another candidate when photographing stitching and the sole. It has a reference contrast ratio of about 1.47:1 against pure white ■#FFFFFF. Compare all photos of the same item side by side: a backdrop that dominates the frame or makes the sneaker’s apparent whiteness inconsistent is not helping.
• Webpage behind the photos: Use white ■#FFFFFF for the product-information area. The light-gray ■#E1E7EB background within the listing image differs from that white page by about 1.25:1. Do not rely on this subtle difference alone to organize cards; use spacing and consistent product-name placement. A dark blue-gray ■#273845 product title contrasts with the white panel at about 12.08:1, while blue-gray ■#465868 price text provides about 7.35:1.
• Border around the currently displayed thumbnail: For a gallery with several small photos, give the selected thumbnail a blue-gray ■#607483 border and a visible “Showing” label. The border has about 3.89:1 contrast against the photo’s light-gray ■#E1E7EB backdrop and about 4.86:1 against the surrounding white ■#FFFFFF. Do not rely on border color alone to indicate which image is being viewed.
• Purchase button: On the white ■#FFFFFF information panel, use deep teal ■#165B75 for the “Add to cart” button. The button differs from surrounding white at about 7.53:1, and white ■#FFFFFF lettering against the teal ■#165B75 button also has about 7.53:1 contrast. Keep purchasing controls separate from the photographic area rather than covering the product image.

Make final adjustments using the real photo and the selling platform’s rules

When changing the photographic background, inspect the gaps between the laces, the shadows around the sole, and the edges of the cutout—not just the empty background around the product. Watch for an unwanted color cast from nearby surfaces or unnatural halos introduced during editing. If the uploaded image has an opaque background, changing the webpage’s CSS background will not change the pixels inside the image.

Photos used in your own product catalog may have different requirements from primary images submitted to an external marketplace. If the image will also be used on another selling platform, check that platform’s current requirements for backgrounds and image editing. On a smartphone, thumbnails appear smaller, so preview the image at that size and inspect the shoelaces and sole again.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires at least 4.5:1 contrast for ordinary-sized text against its background and 3:1 against adjacent colors for visual information essential to identifying interactive controls, such as certain borders and icons. Those figures are not universal numerical requirements for the outline of an entire product photograph. Judge the photograph by whether its real shape and texture are distinguishable.

HueRoll lets you adjust candidate colors with HEX codes and check a selected color against white or black. It does not compare arbitrary pairs of colors or automatically determine WCAG AA or AAA compliance. Calculate combinations such as a light-gray surface and a selected-thumbnail border separately, and inspect the actual product images before deciding.