Menydesign för Mörka Restauranger: 7:1 Kontrastregeln

En whiskybar med 18 bord i Istanbuls Etiler-distrikt såg gäster tända ficklampan på telefonen för att läsa menyn vid levande ljus. Lösningen var inte starkare belysning, utan att höja menyns kontrast från 4.5:1 till 7:1.

WCAG 2.2 AA vs AAA Rekommendation

WCAG 2.2 AA kräver 4.5:1 kontrast för brödtext, men har validerats vid 200-500 lux kontorsbelysning. Kvällsrestauranger ligger på 20-50 lux.

För kvällsställen, börja på AAA-nivå 7:1. Rent vitt på rent svart ger 21:1, men skapar halor; idealet är #F5F5F5 på #0A0A0A (~18:1).

Typografi och Typsnittsvikt

Tunna vikter (100-300) försvinner i svag belysning. Använd Inter, Manrope eller Geist i vikt 500-600 och minst 16px.

• Brödtext: 17-18px, vikt 500
• Rättens namn: 19-20px, vikt 600
• Pris: 16px, tabellariska siffror

Automatiskt Mörkt Läge

Moderna QR-menyer läser prefers-color-scheme för att överta systemtemat. iOS byter automatiskt vid solnedgång.

Data från Etiler: efter mörkt läge + 7:1 kontrast föll "oläsligt"-klagomål med 82%, och kvällsförsäljningen av drycker steg 19%.

FAQ

Hur mäter jag 7:1? WebAIM Contrast Checker eller Chrome Lighthouse räknar automatiskt.

Förstör färgade kategorititlar kontrasten? Ja — använd varumärkesfärger endast dekorativt och håll menytext rent vit.

Behöver vi en manuell mörkt läge-omkopplare? Nej, att respektera systemtemat räcker.

Var detta hjälpsamt? Dela det.