What Color Should Price Displays Use on Web Pages? How to Make Numbers Readable and Noticeable

Should you make prices red or orange to help them stand out on a web page? You can often make the amount easy to find through its size, font weight, and surrounding space without adding a bright color. But emphasizing the number while fading details such as tax or the number of people covered can cause readers to misunderstand the price. Using a fictional weekend bread-making class, this guide compares text and background colors that make prices visible without separating them from their conditions.

Keep the Amount, Currency, Tax Information, and Pricing Unit Together

Imagine a fictional class page listing “Introductory class: ¥3,200 (tax included) per person” and “Parent-and-child class: ¥4,800 (tax included) for one adult and one child.” The amounts are invented to explain the design; they are not prices from a real provider. Keep the class name associated with its amount, and place the tax treatment and number of participants immediately nearby. In English, the ¥ symbol identifies the currency as Japanese yen.

As a starting point, you could set the amount in bold text around 30–32px, with the currency symbol slightly smaller and details such as “tax included” or “per person” around 15–16px. Here px means pixels, a unit for specifying text size and spacing on websites. These are design examples, not fixed targets. Adjust them for the typeface and screen width. Do not separate ¥ from the digits unnecessarily, and do not make the smaller labels so pale that readers miss what the amount covers.

Choose the surface behind the price before selecting its text color. Against white, the same deep text color used in the article may be enough when the amount is larger and bolder. In a separate fee card, you can give the price a restrained dark-green accent. If the price is not itself a link or button, avoid underlining it or enclosing it in a control-like shape that suggests clicking it.

Compare a White Price Display with a Pale Fee Card

The following examples use HEX color codes, written as a hash sign followed by six hexadecimal characters from 0–9 and A–F. A contrast ratio measures the difference in relative luminance between text and its background. All the figures below are calculations for solid, opaque colors.

Option A: Use Size and Weight to Highlight the Price on White

• Use white ■#FFFFFF for the page background and deep blue-gray ■#263746 for ordinary text and class names. Their contrast ratio is approximately 12.23:1.
• Keep “¥3,200” and “¥4,800,” including their currency symbols, in the same deep blue-gray ■#263746. Against white ■#FFFFFF, the ratio is approximately 12.23:1. Let size and font weight make the price more noticeable than the paragraph text.
• Use softer gray-blue ■#56646B for “tax included,” “per person,” and “one adult and one child.” It has approximately 6.12:1 contrast against white ■#FFFFFF. These smaller conditions must remain easy to read.

This option adds no new price-specific hue. Number size and space around each amount establish the reading order, making the approach suitable for information-rich pages that already use several colors. Confirm that each price remains visually attached to the right class name.

Option B: Use a Pale Fee Card with Deep-Green Prices

To help people compare the two classes, you could place each option on a pale blue-green ■#EDF5F1 card. Set the class name in deep blue-gray ■#263746, giving approximately 11.02:1 contrast against the card. Use deep green ■#175C53 for the amount and its currency symbol; against pale blue-green ■#EDF5F1, the contrast ratio is approximately 7.03:1. For “tax included” and the participant count, use gray-blue ■#56646B, providing approximately 5.52:1 against the same card background ■#EDF5F1.

The background contrast between the white ■#FFFFFF page and pale blue-green ■#EDF5F1 cards is only approximately 1.11:1. If a clearer card edge is needed, a muted blue-green-gray ■#56786E rule provides approximately 4.40:1 against the card ■#EDF5F1 and 4.88:1 against the surrounding white ■#FFFFFF. Still use class names and spacing, rather than relying on a border alone, to separate the plans.

Making the conditions very faint gray-green ■#ABB9B2 would result in only approximately 1.84:1 contrast against pale blue-green ■#EDF5F1. That is below the 4.5:1 threshold for normal-sized text, so do not use such a light color for “tax included” or the number of people covered.

Check Mobile Layouts and Make Every Price Condition Clear

If the two class options stack vertically on a phone, do not move “per person” or “one adult and one child” far away from their amounts. Keep the amount, currency, tax label, and participant unit together as one piece of pricing information. Also check for overlap when users enlarge the text.

If there are additional fees or exclusions, verify the actual conditions and state them near the amount. A discount should not be expressed solely by making a number red: explain the eligibility or other terms in words. Never invent a former price, discount percentage, or promotional period without confirmed information.

Under Level AA of WCAG (Web Content Accessibility Guidelines), normal-sized text generally needs at least 4.5:1 contrast against its background, while large text needs at least 3:1. The price colors here exceed even the normal-text threshold, and the smaller tax and participant labels have been checked separately. If you overlay a price on a photograph or use transparency, test the colors that actually appear behind it. A price display succeeds when readers can find the amount and correctly read all its conditions—not just when the digits are brightly colored.