What Color Should Free Shipping Badges Be? How to Make Them Stand Out Naturally on E-commerce Sites
On an e-commerce product listing, an oversized “Free shipping” badge can compete with the product name, price, and purchase button. But an overly faint label may be missed altogether. A more balanced approach is to combine dark lettering with a restrained badge background, while making the conditions for free shipping clear right beside the message. The color should support accurate information, not replace it.
Use a pale badge surface and dark text instead of making it the strongest accent
A badge is a small piece of information about a product or offer. Unlike a purchase button, it is not necessarily an interactive control, so it does not need the page’s brightest fill or most prominent area. On white product cards, a pale, low-saturation teal can identify shipping information without overwhelming the photos. Low saturation simply means a color is less vivid.
The important part is that shoppers can read “Free shipping” and understand when it actually applies. If a minimum purchase amount is required, show a message such as “Free shipping on orders of ¥5,000 or more (incl. tax)” instead of an unconditional claim. Any excluded destinations or delivery methods also need to be communicated clearly. Japan’s Consumer Affairs Agency emphasizes that shipping charges and other transaction conditions must be presented accurately and clearly.
Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, ordinary-sized text generally needs a contrast ratio of at least 4.5:1 against its background. A contrast ratio measures the difference in relative brightness between two colors. For a pale badge, check the lettering against the badge’s actual fill, not just against the overall webpage.
Example colors for a free-shipping badge in a home-goods shop
Consider a fictional shop selling a gift glass set for ¥5,400 including tax and a hand-towel set for ¥2,700 including tax. Its hypothetical policy provides free standard shipping to eligible destinations when the total price of products in an order reaches ¥5,000 including tax. Some destinations and delivery methods are excluded. HEX is a hexadecimal code used to specify web colors.
- Product-card background: Use pale gray #F7F9FB for the webpage and white #FFFFFF for product cards. The contrast between these surfaces is only about 1.06:1, so spacing and consistent title placement also need to separate the cards. Keep the background colors restrained so the products remain the focus.
- Free-shipping badge: On the white #FFFFFF card, use a pale teal #E5F3F5 badge with dark teal #195866 lettering reading “Free shipping on orders of ¥5,000+ (incl. tax).” The text-to-badge ratio is about 7.03:1. Position the badge where it does not cover key parts of the product photograph or dominate the price.
- Making the badge boundary visible: Pale teal #E5F3F5 differs from surrounding white #FFFFFF by only about 1.14:1. If the badge needs a visible outline, add a blue-gray #647E89 border: it contrasts at about 3.78:1 with the teal inside and 4.30:1 with white outside. The badge is informational, not a button, so a strong boundary is not automatically required when its text already communicates the content.
- Price and conditions: On white #FFFFFF, display the price in dark blue-gray #294051 for about 10.79:1 contrast. Supporting text such as “Eligible destinations and standard delivery only” can use muted blue-gray #4A5C6D, at about 6.90:1 against white. The ¥5,400 glass set meets the amount threshold on its own but still depends on the destination and shipping method. The ¥2,700 towel set does not meet that threshold alone; eligibility depends on the combined order.
- Purchase button: On the white #FFFFFF card, use deep blue #205772 for “Add to cart,” with white #FFFFFF lettering. The button against white and its text against the fill each have about 7.87:1 contrast. Pale badges communicate shipping terms, while solid dark buttons communicate the next action.
Even the ¥5,400 item should not receive an unconditional “Free shipping” claim before its other delivery conditions are known. On listing pages, show the qualified offer. Once the shipping address, method, and order contents are confirmed, display the actual shipping charge in the order summary.
Recheck photography, mobile layouts, and changes in shipping conditions
Placing a badge over a colorful product photograph can make the lettering harder to read as the background changes. Start by positioning the badge outside the photograph. If it must overlap the image, use an opaque, solid surface rather than a translucent one, then check the result. Pale blue #92B9C4 text on the pale teal #E5F3F5 badge has only about 1.85:1 contrast and is unsuitable for small shipping information.
On mobile screens, a long condition may need two lines. Keep “¥5,000+” and “Free shipping” clearly related even after wrapping, with delivery exceptions nearby rather than hidden in difficult-to-find text. Update the badge when the threshold, eligible regions, or delivery methods change. Accuracy at checkout matters more than making the badge visually louder.
HueRoll allows you to adjust candidate colors using HEX and compare the selected color against white or black. It cannot compare arbitrary color pairs or automatically determine WCAG AA or AAA compliance. Calculate the actual combinations of badge fill, lettering, and borders separately, then inspect them on the finished page.