El modo oscuro de un menú digital puede venir de dos lugares: del celular del comensal, que pide a la página un tema oscuro, o de la plataforma del menú, que ofrece una apariencia oscura que tú eliges. Casi siempre conviven los dos, y por eso un mismo menú puede verse distinto en el teléfono de cada cliente. Esta guía explica cómo se decide qué ve cada persona, qué debes configurar tú, qué no cambia (platos, precios y pedido) y cómo comprobar que todo se lea bien en una sala con poca luz o a pleno sol.
Si buscabas cómo poner en oscuro el menú de Windows, de Word o de una app del celular, esta no es esa guía: aquí hablamos del menú de tu restaurante al que se entra escaneando un código QR.
En resumen
- El modo oscuro puede activarlo el comensal desde los ajustes de su celular o navegador, y el menú puede responder a eso; también puede ser una apariencia que el restaurante elige en su plataforma.
- Cambia solo el aspecto: los platos, los precios y el proceso de pedido siguen igual.
- Lo que decide si funciona es el contraste: al menos 4,5:1 para texto normal y 3:1 para texto grande, según las pautas WCAG 2.2 del W3C.
- Define siempre color de texto y color de fondo a la vez, y revisa fotos, botones, estados de foco y el carrito del pedido.
- Prueba el menú en varios celulares, con brillo bajo y alto, antes de publicarlo.
Tabla de contenidos
- Qué significa el modo oscuro en un menú QR
- ¿Depende del celular o de la plataforma del menú?
- Cómo activar o configurar la apariencia oscura
- Cómo elegir los colores de un menú oscuro
- Qué cambia y qué no cambia con el modo oscuro
- ¿Conviene un menú oscuro en tu restaurante?
- Cómo comprobar que se ve bien en distintos celulares
- Errores frecuentes al oscurecer un menú
- Nuestra perspectiva
- Una carta lista en menos de 24 horas
- Preguntas frecuentes
- Fuentes
Qué significa el modo oscuro en un menú QR
Un menú QR es una página web que se abre en el navegador del celular. No hay una app que instalar, así que el "modo oscuro" de ese menú no es un ajuste del sistema operativo aplicado por arte de magia: es un diseño con fondo oscuro y texto claro, que la página puede mostrar siempre, nunca, o solo cuando el cliente lo ha pedido.
Hay tres escenarios habituales:
- Menú siempre oscuro. El restaurante decide una identidad visual oscura (un bar de cócteles, una cervecería, un restaurante de ambiente íntimo) y todos los comensales ven el mismo diseño.
- Menú siempre claro. Es lo más común y lo más seguro para fotos de comida, pero ignora a quien lleva el celular en oscuro.
- Menú que se adapta. La página detecta la preferencia del dispositivo y cambia sola entre claro y oscuro.
No hay una respuesta única. Depende de tu local, de tu carta y de cuándo te visitan tus clientes. Más abajo vemos cómo decidir.
¿Depende del celular o de la plataforma del menú?
Depende de ambos, y conviene entender la división de tareas.
El celular del comensal aporta la preferencia. Los navegadores exponen a las páginas una señal, la característica CSS prefers-color-scheme, que detecta si el usuario ha pedido un tema claro u oscuro mediante la configuración de su sistema operativo o de su navegador. Si la persona tiene su iPhone o su Android en oscuro, esa señal llega a la página.
La página del menú decide qué hacer con esa señal. Según la documentación de MDN, la propiedad color-scheme permite declarar que una página admite esquemas claros y oscuros, y la consulta prefers-color-scheme sirve para adaptar el resto de los elementos. En otras palabras: si el menú no está preparado, no se oscurece aunque el celular esté en oscuro; y si está preparado, responde sin que el cliente toque nada.
Por eso verás casos aparentemente contradictorios: un cliente con el celular en oscuro que ve tu menú claro, y otro con el celular en claro que ve tu menú oscuro. Lo primero pasa cuando la plataforma no adapta el tema. Lo segundo, cuando el restaurante fijó una apariencia oscura.
Qué te toca a ti como restaurante
Tú controlas cuatro cosas: si el menú es fijo o adaptable, la paleta de colores, las imágenes de los platos y la prueba final. El comensal no necesita instalar nada ni registrarse; en un menú QR bien hecho, la experiencia empieza al escanear.
Cómo activar o configurar la apariencia oscura
El camino exacto cambia según la plataforma, y no todas ofrecen las mismas opciones. Estos son los pasos generales que deberías buscar, sea cual sea tu herramienta:
- Entra al editor del menú. Busca un apartado de apariencia, tema, diseño o personalización.
- Mira si hay temas prediseñados. Algunas plataformas incluyen una variante oscura lista para usar; es la vía más rápida y suele traer contrastes ya resueltos.
- Si quieres tu propia paleta, elige colores de fondo y de texto juntos. No cambies uno sin revisar el otro.
- Guarda como una apariencia nueva en lugar de sobrescribir la actual, para poder volver atrás si algo no convence.
- Abre el menú real escaneando el QR con un celular, no solo en la vista previa del ordenador.
- Revisa todas las pantallas: categorías, ficha de plato, carrito, confirmación del pedido.
En Fowst trabajamos con un editor visual pensado para que el restaurante cambie el aspecto de su carta sin conocimientos técnicos, y la puesta en marcha lleva menos de 24 horas. Si tu objetivo es una carta con un aspecto oscuro o una paleta propia, consulta con nuestro equipo qué opciones de apariencia tiene tu plan antes de contratar.
Cómo elegir los colores de un menú oscuro
Un menú oscuro bien hecho no es un menú en negro puro con texto en blanco puro. Esa combinación tiene un contraste enorme, pero para muchas personas cansa la vista en bloques largos de texto. Es mejor un fondo gris muy oscuro o azul marino profundo, y un texto claro sin llegar al blanco total, siempre comprobando los números.
La regla del contraste
Las pautas WCAG 2.2 del W3C fijan el mínimo: 4,5:1 para texto normal y 3:1 para texto grande. El objetivo es que lo lea también quien tiene baja visión o menor sensibilidad al contraste. Eso, en un menú, afecta a muchísima gente: personas mayores, clientes sin gafas en un local con velas, o alguien con el celular al mínimo de brillo.
De la guía del W3C para diseñadores se desprenden otras reglas útiles para una carta:
- No uses el color como única forma de transmitir información. Si marcas los platos vegetarianos solo con un punto verde, añade también una etiqueta o un icono distinto. Esa guía también recomienda permitir ampliar el texto hasta el 200 %, evitar el desplazamiento en varias direcciones y mantener al menos 3:1 en componentes no textuales, como bordes de botones o iconos.
- Usa texto real, no imágenes de texto. WebAIM insiste en ello, junto con una estructura lógica de encabezados, un tamaño de fuente adecuado y controles que se distingan claramente. Una carta subida como foto o PDF escaneado no se adapta a ningún tema, y tampoco la leen bien los lectores de pantalla.
Define fondo y texto a la vez
Es el error más común y el más fácil de evitar. El W3C advierte de que especificar solo el color del texto o solo el del fondo puede producir combinaciones ilegibles cuando el usuario cambia sus preferencias o el navegador aplica las suyas. Si tu menú fija un texto gris claro pero deja el fondo "por defecto", un cliente con el navegador en claro podría ver gris claro sobre blanco. Fija siempre el par completo.
Para más contexto sobre cumplimiento y buenas prácticas, tenemos una guía normativa de accesibilidad en menús digitales.
Qué cambia y qué no cambia con el modo oscuro
Una duda frecuente de los gerentes: ¿esto toca la carta o el proceso de pedido? No. El modo oscuro es una capa visual.
| Elemento | ¿Cambia con el modo oscuro? |
|---|---|
| Platos, descripciones y alérgenos | No, es el mismo contenido |
| Precios | No |
| Idioma del menú | No |
| Proceso de pedido (carrito, envío a cocina) | No, solo su aspecto |
| Colores de fondo, texto y botones | Sí |
| Aspecto de las fotos | Sí, en la percepción: una foto luminosa destaca más sobre fondo oscuro |
| Contraste de iconos, bordes y etiquetas | Sí, hay que revisarlos |
Es decir, el cliente pide lo mismo y tú recibes el mismo pedido. Lo que debes vigilar es que ningún elemento quede "escondido": un botón de "Añadir al carrito" con texto oscuro sobre fondo oscuro es un pedido perdido.
Fotos de platos sobre fondo oscuro
Las fotos con fondo blanco o muy claro pueden verse como rectángulos pegados sobre un menú oscuro. Tienes dos soluciones: usar fotos con fondo neutro o ambiente cálido, o aplicar esquinas redondeadas y márgenes para que la imagen parezca integrada. Las fotos de comida con buena luz suelen funcionar bien en oscuro, porque los colores resaltan, pero compruébalo plato por plato, sobre todo en los blancos y marrones (arroces, cremas, postres de chocolate).
¿Conviene un menú oscuro en tu restaurante?
No hay un sí universal. Estos criterios te ayudan a decidir.
A favor del oscuro:
- Tu local tiene poca luz (bar nocturno, restaurante de ambiente tenue). Una pantalla blanca deslumbra y rompe la atmósfera.
- Tu marca ya es oscura y quieres coherencia entre el local, las redes y la carta.
- Muchos de tus clientes consultan el menú de noche.
A favor del claro:
- Sirves desayunos, brunch o comida con terraza a pleno sol: en exteriores, un fondo claro con buen contraste suele leerse mejor.
- Tu carta es larga y con mucho texto, que cansa menos en claro para algunos lectores.
- Tus fotos están hechas con fondo blanco.
Mejor lo adaptable:
- Atiendes a turistas y locales a distintas horas, y quieres respetar la preferencia de cada celular. Si tu público es internacional, mira también cómo funciona un menú QR multilingüe para turistas: el idioma y el tema son dos ajustes distintos y pueden combinarse.
Si dudas, no lo decidas por intuición. Una prueba comparada da datos reales; en nuestra guía sobre pruebas A/B en el menú digital explicamos cómo plantearla en pocas semanas, y en la de pruebas de usabilidad cómo observar a clientes reales usando la carta.
Cómo comprobar que se ve bien en distintos celulares
Ver el menú en tu propio teléfono no basta. Sigue este proceso antes de publicar.
1. Mide el contraste con herramientas
WebAIM ofrece un bookmarklet para comprobar el contraste directamente sobre una página y seleccionar colores con un cuentagotas, de modo que no tengas que adivinar códigos. Sirve en un navegador de ordenador con la carta abierta; mide texto, botones y etiquetas.
2. Revisa los estados que no salen en una captura
Una carta puede verse perfecta al abrirla y fallar al interactuar. WebAIM explica que WAVE permite revisar contraste, estados hover y focus, orden de lectura y dependencia del color, y recomienda probar también los estados interactivos y desaturar la página para ver si algo depende solo del color. En un menú de pedidos, eso significa: botón pulsado, plato seleccionado, campo de notas activo, mensaje de error si falta algo.
3. Prueba en dispositivos y luz reales
Usa al menos estos casos:
- Un iPhone y un Android, uno con el sistema en oscuro y otro en claro.
- Un celular antiguo o con pantalla de gama baja, que muestra los grises oscuros de forma distinta.
- Brillo al mínimo dentro del local, con la luz real de la sala.
- Brillo al máximo en la terraza o junto a una ventana, de día.
- Texto ampliado desde los ajustes del celular.
- Conexión lenta, porque una página que tarda en cargar puede mostrar un fogonazo blanco antes de aplicar el tema oscuro.
Pide a un camarero y a un cliente habitual que escaneen el QR y hagan un pedido de prueba. Dos minutos de observación descubren más que una hora de revisión a solas. Si quieres una lista completa para la revisión final, tienes nuestro checklist para revisar el menú digital antes de publicarlo.
4. Un ejemplo de revisión rápida
Imagina una carta con fondo gris muy oscuro, texto de platos en gris claro, precios en dorado y botón de pedido en rojo vino con texto blanco. La revisión diría:
- Texto de platos: comprobar que supera 4,5:1. Casi seguro que sí.
- Precios en dorado: suelen pasar, pero revisa el dorado sobre las fotos si el precio aparece encima.
- Botón rojo vino con texto blanco: normalmente pasa, pero el borde del botón sobre el fondo oscuro necesita 3:1 si es lo único que lo delimita.
- Etiquetas de alérgenos solo con color: añadir texto o icono.
Con un cuarto de hora de trabajo así evitas la mayoría de problemas.
Errores frecuentes al oscurecer un menú
- Negro puro con blanco puro. Contraste extremo que cansa; mejor tonos suavizados.
- Gris sobre gris. Se ve elegante en el ordenador y es ilegible a pleno día.
- Letra fina y pequeña. En oscuro, el texto claro parece más delgado; sube un punto el peso o el tamaño.
- Información solo por color. Un plato agotado marcado únicamente en gris tenue no lo ve quien tiene baja visión.
- Imágenes de texto. Banners con letras incrustadas que no se adaptan.
- No probar el carrito. Es la pantalla donde más se rompen los contrastes, y la que más dinero mueve.
- Olvidar la publicidad. Si tu carta muestra anuncios o banners de terceros, comprueba que también se ven bien con tu tema.
Nuestra perspectiva
En Fowst vemos el modo oscuro como una decisión de marca y de servicio, no como una moda. Un menú digital existe para que el cliente encuentre lo que quiere, lo entienda y pida sin fricción, sin apps ni registros y con carga rápida incluso con conexión lenta. Un tema oscuro solo es buena idea si ayuda a eso.
Por eso insistimos en tres hábitos. Primero, decidir con el local y la hora de uso en mente: un bar nocturno y un restaurante de menús del mediodía no necesitan lo mismo. Segundo, tratar el contraste como un requisito, no como un detalle estético: si un cliente no lee un precio, no pide. Tercero, probar con personas reales antes de publicar y revisar los resultados después, porque pedir menos errores y más ventas empieza por que la carta se lea bien.
Nuestro consejo práctico: empieza con una apariencia segura, mide cómo se comporta y mejora a partir de datos. Y no cambies el contenido de la carta por el hecho de cambiar el tema: el cambio visual y el cambio de oferta se deben probar por separado, para saber qué movió la venta.
— Fowst.com
Una carta lista en menos de 24 horas
Si aún no tienes menú QR, o el que tienes no te deja cuidar su aspecto, en Fowst ofrecemos planes Básico, Delivery, Premium y Enterprise con menú interactivo en más de 100 idiomas, carrito individual por comensal, editor visual, gestión de sucursales y paneles en tiempo real. Puedes ver los planes y empezar desde fowst.com. Si prefieres entender primero el panorama, lee nuestra guía del menú online con código QR.
Preguntas frecuentes
¿Por qué mi menú QR se ve claro si mi celular está en modo oscuro?
Porque el menú es una página web y solo se oscurece si está preparada para responder a la preferencia del dispositivo. Si la plataforma fija un tema claro, tu celular no lo cambia. Es una decisión del restaurante o de la plataforma, no un fallo del teléfono.
¿El cliente tiene que activar algo para ver el menú en oscuro?
Si el menú se adapta, solo necesita tener el tema oscuro activado en los ajustes de su celular o navegador. Si el restaurante fijó una apariencia oscura, todos lo ven así sin hacer nada. En ambos casos no hay que instalar ninguna app.
¿El modo oscuro afecta a los pedidos o a los precios?
No. Cambia solo los colores y el aspecto de las pantallas. Los platos, los precios y el proceso de pedido son los mismos; lo que debes comprobar es que botones y textos mantengan contraste suficiente.
¿Qué contraste mínimo debe tener un menú oscuro?
Las pautas WCAG 2.2 piden al menos 4,5:1 para texto normal y 3:1 para texto grande. También conviene mantener 3:1 en componentes no textuales como bordes de botones e iconos. Compruébalo con una herramienta de contraste, no a ojo.
¿Es mejor un menú oscuro o uno claro?
Depende del local y del momento de uso. El oscuro encaja en ambientes de poca luz y marcas oscuras; el claro suele leerse mejor a pleno sol. Si no lo tienes claro, prueba ambos con clientes reales y mide cuál genera menos dudas y más pedidos.
Fuentes
- prefers-color-scheme, característica CSS (MDN)
- color-scheme, propiedad CSS (MDN)
- Criterio 1.4.3: Contraste mínimo (W3C, WCAG 2.2)
- F24: fallo por definir solo color de texto o de fondo (W3C)
- Responsabilidades del diseñador visual (W3C)
- Accesibilidad web para diseñadores (WebAIM)
- Bookmarklet de comprobación de contraste (WebAIM)
- Consejos para aprovechar WAVE (WebAIM)