Place the charge information with the base price, at the same time, in a form a consumer can read without searching. It must be prominent relative to the price, not buried in small print.
Who it binds. The supplier who displays the base price, and the designers and content owners who build the screen.
Operative term. legible, prominent and unambiguous
What this means in practice
Legibility is about size and contrast. Prominence is about relative weight: a fee note in grey 10px under a bold headline price is not prominent. Closeness is about distance on the screen, including on a phone where the price and the note can be separated by a scroll. Unambiguous means one meaning: "may apply" is different from "applies". The duty travels with the price, so the same standard applies on the product page, the basket, the checkout and any advertisement that displays a base price. A design system should carry the charge block as a component, not as a one-off footnote.
How to test it
Check the rendered page, not the design file. On a phone, measure whether the price and the charge information are visible together or require a scroll. Check the contrast and the type size against the surrounding content. Read the note aloud: if it can be read two ways, rewrite it. Ask a person who has not seen the page to find the total cost and say what is included. If they cannot, the display fails the manner test even if the right words are present.
Evidence to keep
The Act does not prescribe these records. They are the artefacts our reading says a regulator or auditor may ask for; keep the ones that fit your business and the provision.
- Rendered screenshotsDesktop and phone screenshots showing the price and the charge block together.
- Accessibility checkThe contrast ratio and type size for the charge block, with the tool output.
- Copy testA comprehension test with a person outside the team, and the corrected wording.
- Design componentThe approved price-and-charge component, with the rule for its use.
- Publishing checklistThe step that blocks a page which displays a price without the component.
What to do first
- Build one price-and-charge component and make it the only approved way to show a price.
- Test the component on a phone before it ships, not only on a desktop canvas.
- Add a publishing check that fails a page with a price and no charge block.