Projektowanie Menu dla Ciemnych Restauracji: Reguła Kontrastu 7:1

Bar whisky z 18 stolikami w stambulskim Etiler widział, jak goście włączają latarkę w telefonie, by przeczytać menu przy świecach. Rozwiązaniem nie było jaśniejsze oświetlenie, lecz podniesienie kontrastu menu z 4.5:1 do 7:1.

WCAG 2.2 AA vs Zalecenie AAA

WCAG 2.2 AA wymaga kontrastu 4.5:1 dla tekstu, ale został zwalidowany przy 200-500 luksów biurowego oświetlenia. Wieczorne restauracje mają 20-50 luksów.

Dla lokali wieczornych zacznij od poziomu AAA 7:1. Czysta biel na czarnym daje 21:1, ale tworzy halo; ideałem jest #F5F5F5 na #0A0A0A (~18:1).

Typografia i Grubość

Cienkie grubości (100-300) znikają w słabym świetle. Używaj Inter, Manrope lub Geist o grubości 500-600 i co najmniej 16px.

• Tekst: 17-18px, grubość 500
• Nazwa dania: 19-20px, grubość 600
• Cena: 16px, cyfry tabelaryczne

Automatyczny Tryb Ciemny

Nowoczesne menu QR czytają prefers-color-scheme, by zaadoptować motyw systemowy. iOS przełącza się o zachodzie słońca.

Dane z Etiler: po trybie ciemnym + kontraście 7:1 skargi "nieczytelne" spadły o 82%, a wieczorna sprzedaż napojów wzrosła o 19%.

FAQ

Jak zmierzyć 7:1? WebAIM Contrast Checker lub Chrome Lighthouse liczą automatycznie.

Czy kolorowe nagłówki kategorii psują kontrast? Tak — kolory marki używaj tylko dekoracyjnie, a tekst menu trzymaj w czystej bieli.

Czy potrzebujemy ręcznego przełącznika trybu ciemnego? Nie, szanowanie motywu systemowego wystarczy.

Czy to było pomocne? Udostępnij.