Progettare Menu per Ristoranti in Penombra: La Regola 7:1

Un whiskey bar da 18 tavoli a Etiler, Istanbul, vedeva gli ospiti accendere la torcia del telefono per leggere il menu a lume di candela. La soluzione non era più luce ma alzare il contrasto del menu da 4.5:1 a 7:1.

WCAG 2.2 AA vs Raccomandazione AAA

WCAG 2.2 AA richiede 4.5:1 per il testo, ma è stato validato a 200-500 lux. I ristoranti serali sono a 20-50 lux.

Per locali serali, parti dal rapporto AAA 7:1. Bianco puro su nero puro dà 21:1 ma crea aloni; ideale è #F5F5F5 su #0A0A0A (~18:1).

Tipografia e Peso

I pesi sottili (100-300) scompaiono con poca luce. Usa Inter, Manrope o Geist a peso 500-600 e almeno 16px.

• Corpo: 17-18px, peso 500
• Nome piatto: 19-20px, peso 600
• Prezzo: 16px, cifre tabulari

Modalità Scura Automatica

I menu QR moderni leggono prefers-color-scheme per adottare il tema di sistema. iOS passa al tramonto, nessun interruttore necessario.

Dati da Etiler: dopo modalità scura + contrasto 7:1, i reclami "illeggibile" sono calati dell'82% e le vendite serali di bevande sono salite del 19%.

FAQ

Come misuro 7:1? WebAIM Contrast Checker o Lighthouse di Chrome lo calcolano.

I titoli colorati rovinano il contrasto? Sì — usa i colori del brand solo decorativamente e tieni il testo menu in bianco puro.

Serve un toggle manuale per la modalità scura? No, rispettare il tema di sistema basta.

Ti è stato utile? Condividilo.