Designing Menus for Dimly Lit Restaurants: The 7:1 Contrast Rule

An 18-table whiskey bar in Istanbul's Etiler district kept seeing guests flip on their phone flashlight to read the menu under candlelight. The fix wasn't brighter bulbs — it was pushing the menu contrast ratio from 4.5:1 up to 7:1.

WCAG 2.2 AA Minimum vs AAA Recommendation

WCAG 2.2 AA mandates a 4.5:1 contrast ratio for body text, but it was validated at 200-500 lux office lighting. Most dinner restaurants run at 20-50 lux — roughly one-tenth of that baseline. Older guests need even more headroom because retinal cone sensitivity drops with age.

For evening venues, start from the AAA-grade 7:1 ratio instead. Pure white #FFFFFF on pure black #000000 hits 21:1 but causes glare halos; the sweet spot is #F5F5F5 text on #0A0A0A background (~18:1), which still reads clean while reducing strain.

Typography & Font Weight Choices

Thin font weights (100-300) collapse in low light. Modern sans-serifs — Inter, Manrope, Geist — at weight 500-600 and 16px+ size carry through. Avoid italics and script fonts; nighttime glare blurs character boundaries.

• Body: 17-18px, weight 500, line-height 1.6
• Product name: 19-20px, weight 600
• Price: 16px, weight 600, tabular-nums for alignment

Automatic Dark Mode Switching

Modern QR menus use the prefers-color-scheme CSS media query to read the phone's system theme. iOS auto-switches at sunset; after 7 pm your menu flips to dark automatically — no toggle needed. thMenu treats this as the default behavior.

The Etiler bar data: after dark mode + 7:1 contrast typography, "can't read the menu" complaints dropped 82%, and evening drink sales rose 19% because guests stopped skipping the cocktail and aperitif sections they couldn't previously parse.

FAQ

How do I measure a 7:1 ratio? Use WebAIM Contrast Checker or Chrome DevTools' Lighthouse accessibility audit — both compute the ratio automatically.

Do colored category headers ruin contrast? Yes — keep brand amber/gold for decorative accents only, and render actual menu copy in pure white.

Should we add a manual dark-mode toggle? No — respecting the system setting is enough and avoids cluttering the UI with controls guests won't find anyway.

Found this helpful? Share it.