Spring til indhold

Digital Menus

How to Make a Restaurant Menu Easier to Read on a Phone

A menu is easy to read on a phone when it is made for the screen rather than shrunk onto it: text that wraps to the width of the phone instead of a page you have to pinch and drag, enough contrast between text and background, short sections a guest can jump between, brief descriptions with the price close to the name, and buttons large enough for a thumb. A PDF of the printed menu fails most of these; a web menu can meet all of them.

Let the text fit the screen

The web accessibility guidelines (WCAG 2.1) set a useful bar here. Content should reflow at a width equivalent to 320 CSS pixels without scrolling in two directions, and text should stay usable when it is enlarged up to 200 percent. A guest who has to zoom and slide sideways to read each line will give up and ask for the paper menu.

Enough contrast, in daylight and dim light

  • WCAG 2.1 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • Pale grey on white and white on a light brand colour are the usual failures.
  • Avoid text over photos unless there is a solid band behind it.
  • Check the menu on a phone outdoors and in your dimmest corner.

Make it easy to find a dish

  • Short categories with clear names, and tabs or a list to jump between them.
  • A search box for long menus.
  • Filters for dietary needs, so guests do not read every description.
  • Dish name first, price next to it, then one or two lines of description.
  • Details — allergens, options, a larger photo — on the dish's own page.

Buttons a thumb can hit

Small add buttons and tightly packed links cause wrong taps. WCAG 2.1's stricter level suggests targets of at least 44 by 44 CSS pixels; even if you do not aim for that level, it is a sensible size for the buttons guests use most.

Photos that help, not slow down

  • Use photos for dishes guests do not know, not necessarily for every item.
  • Keep them light, so the menu opens quickly on mobile data.
  • If a photo is not of your own dish, say so.

Check your menu against these points with the menu checker.

Why a PDF struggles on a phone: QR code menu vs PDF menu.

A readable menu with Thmenu

A Thmenu menu is a web page that opens in the guest's browser and fits the width of the phone. You pick a theme preset, colours, a font and a layout — grid, list or compact — and the text on your brand colour is switched between white and dark automatically so it stays readable. Guests browse categories, search, filter by dietary needs and open a dish for its photos, description, price, options and allergens. Photos that are not of the real dish are labelled "Illustrative image", and the menu opens in the language the phone is set to, with 31 languages available.

See the Thmenu digital menu.

Sources

  1. W3C — Web Content Accessibility Guidelines (WCAG) 2.1 (Success Criteria 1.4.3, 1.4.4, 1.4.10, 2.5.5) (accessed 28 October 2026)

About the author

Thmenu Team — Product team at Synaltix LLC, the company that builds Thmenu. The Thmenu team builds menus, ordering and payment tools for restaurants and cafés. Articles describe how things work in practice and, where Thmenu is mentioned, what the product does today.