Desenhar Cardápios para Restaurantes com Pouca Luz: Regra 7:1

Um bar de uísque de 18 mesas em Etiler, Istambul, via clientes ligando a lanterna do celular para ler o cardápio à luz de velas. A solução não foi mais iluminação mas elevar o contraste do menu de 4.5:1 para 7:1.

WCAG 2.2 AA vs Recomendação AAA

WCAG 2.2 AA exige 4.5:1 para texto comum, mas foi validado a 200-500 lux de escritório. Restaurantes noturnos ficam em 20-50 lux.

Para locais noturnos, parta do AAA 7:1. Branco puro sobre preto puro dá 21:1 mas cria halos; ideal é #F5F5F5 sobre #0A0A0A (~18:1).

Tipografia e Peso

Pesos finos (100-300) somem em pouca luz. Use Inter, Manrope ou Geist em peso 500-600 e no mínimo 16px.

• Corpo: 17-18px, peso 500
• Nome do prato: 19-20px, peso 600
• Preço: 16px, dígitos tabulares

Modo Escuro Automático

Cardápios QR modernos leem prefers-color-scheme para adotar o tema do sistema. iOS alterna ao pôr do sol sem botão.

Dados de Etiler: após modo escuro + contraste 7:1, as queixas "ilegível" caíram 82% e as vendas noturnas de bebidas subiram 19%.

FAQ

Como meço 7:1? WebAIM Contrast Checker ou Lighthouse do Chrome calculam automaticamente.

Títulos coloridos quebram o contraste? Sim — use cores da marca apenas decorativamente e mantenha texto do menu em branco puro.

Precisamos de toggle manual de modo escuro? Não, respeitar o tema do sistema basta.

Achou útil? Compartilhe.