Un bar de whisky de 18 mesas en Etiler, Estambul, observaba a los clientes encender la linterna del móvil para leer la carta a la luz de las velas. La solución no fue más iluminación sino subir el contraste del menú de 4.5:1 a 7:1.
WCAG 2.2 AA vs Recomendación AAA
WCAG 2.2 AA exige un contraste de 4.5:1 para texto normal, pero se validó con 200-500 lux de iluminación de oficina. Los restaurantes nocturnos rondan los 20-50 lux.
Para locales de noche, parte del ratio AAA de 7:1. El blanco puro sobre negro puro da 21:1 pero genera halos; lo ideal es #F5F5F5 sobre #0A0A0A (~18:1).
Tipografía y Grosor
Los grosores finos (100-300) desaparecen con poca luz. Usa Inter, Manrope o Geist con grosor 500-600 y al menos 16px.
- Cuerpo: 17-18px, grosor 500
- Nombre del plato: 19-20px, grosor 600
- Precio: 16px, números tabulares
Modo Oscuro Automático
Los menús QR modernos leen prefers-color-scheme para adoptar el tema del sistema. iOS cambia al anochecer sin botón.
Datos de Etiler: tras modo oscuro + contraste 7:1, las quejas "ilegible" cayeron un 82% y las ventas de bebidas nocturnas subieron 19%.
FAQ
¿Cómo mido 7:1? WebAIM Contrast Checker o Lighthouse de Chrome lo calculan.
¿Los títulos de color rompen el contraste? Sí — usa colores de marca solo decorativos y deja el texto del menú en blanco puro.
¿Hace falta un botón manual de modo oscuro? No, respetar el tema del sistema basta.
¿Te resultó útil? Compártelo.
Artículos relacionados
12 beneficios concretos de los menús QR (con datos reales)
Cero costes de impresión, +31 % en ticket medio, soporte para 20 idiomas: 12 raz…
Por qué las fotos del menú aumentan las ventas: guía para restaurantes
Los platos con fotos reciben hasta un 30 % más de pedidos. Aquí está la ciencia …
Por que los usuarios de Apple Pay esperan 12 segundos menos que Chip+PIN en restaurantes
Datos Visa 2024: chip+PIN 25.3s, Apple Pay 13.1s. Para una brasserie de 32 mesas…