Menydesign for Mørke Restauranter: 7:1 Kontrastregelen

En whiskeybar med 18 bord i Istanbuls Etiler-distrikt så gjester slå på lommelykten på telefonen for å lese menyen ved stearinlys. Løsningen var ikke sterkere belysning, men å øke menyens kontrast fra 4.5:1 til 7:1.

WCAG 2.2 AA vs AAA Anbefaling

WCAG 2.2 AA krever 4.5:1 kontrast for brødtekst, men ble validert ved 200-500 lux kontorbelysning. Kveldsrestauranter går på 20-50 lux.

For kveldssteder, start på AAA-nivå 7:1. Rent hvitt på rent sort gir 21:1, men skaper halo-effekt; idealet er #F5F5F5 på #0A0A0A (~18:1).

Typografi og Skriftvekt

Tynne vekter (100-300) forsvinner i svakt lys. Bruk Inter, Manrope eller Geist i vekt 500-600 og minst 16px.

• Brødtekst: 17-18px, vekt 500
• Rettnavn: 19-20px, vekt 600
• Pris: 16px, tabulariske tall

Automatisk Mørk Modus

Moderne QR-menyer leser prefers-color-scheme for å overta systemtemaet. iOS bytter automatisk ved solnedgang.

Data fra Etiler: etter mørk modus + 7:1 kontrast falt "uleselig"-klager med 82%, og kveldssalget av drikker steg 19%.

FAQ

Hvordan måler jeg 7:1? WebAIM Contrast Checker eller Chrome Lighthouse beregner automatisk.

Ødelegger fargede kategorititler kontrasten? Ja — bruk merkefarger kun dekorativt og hold menytekst rent hvit.

Trenger vi en manuell mørk modus-bryter? Nei, å respektere systemtemaet er nok.

Var dette nyttig? Del det.