Colores y contraste en un código QR: qué combinaciones funcionan

Personalizar un QR con los colores de la marca es una de las decisiones que más códigos estropea. La buena noticia es que hay reglas simples. La mala, que las combinaciones que «quedan bonitas» en pantalla a menudo fallan en un cartel mal iluminado.

Qué mide un lector realmente

Una cámara no «ve colores»: convierte la imagen a niveles de gris y decide, módulo a módulo, si es oscuro o claro. Lo que importa es la diferencia de luminosidad entre el código y el fondo, no su tono. Un rojo intenso sobre un verde intenso pueden parecer muy distintos para una persona y casi idénticos en escala de grises. Por eso se habla de contraste y no de «colores distintos».

Cuánto contraste necesitas

Usamos la relación de contraste que define la accesibilidad web (WCAG), calculada a partir de la luminancia relativa: va de 1:1 (idénticos) a 21:1 (negro sobre blanco). Como guía:

ContrasteValoración
Menos de 3:1Peligroso: fallará en condiciones reales
3:1 a 4,5:1Justo: puede fallar con poca luz o móviles antiguos
Más de 4,5:1Seguro para uso general
Más de 10:1Óptimo: impresión en cualquier soporte

La calculadora del generador te avisa cuando el par de colores queda por debajo de 3:1, y el verificador mide el contraste real de una imagen ya hecha.

Combinaciones que funcionan

  • Negro sobre blanco: 21:1. La referencia. Nada la supera.
  • Azul marino (#1e3a8a) sobre blanco: contraste alto y compatible con casi cualquier marca.
  • Verde oscuro (#14532d) o granate (#7f1d1d) sobre blanco o crema: buena personalización con seguridad.
  • Negro sobre amarillo pálido o crema: funciona si el fondo es claro y uniforme.

Lo que hay que evitar

  • Códigos claros sobre fondo oscuro (invertidos). El estándar los contempla, pero muchos lectores no los admiten de forma fiable. Si tu diseño lo exige, prueba en varios móviles.
  • Colores pálidos sobre blanco: amarillo, naranja claro, gris medio y turquesa casi nunca llegan a 3:1.
  • Degradados dentro del código: pueden hacer que parte del dibujo quede por debajo del contraste mínimo. Si usas un degradado, el extremo más claro debe cumplir contraste.
  • Fondos con fotografía o textura: el ruido de fondo confunde la binarización. Coloca el QR sobre un recuadro blanco liso.
  • Tonos del mismo valor: rojo y verde de la misma luminosidad, azul y morado oscuros… parecen contrastar y no lo hacen.

Cómo oscurecer un color de marca

Si tu color corporativo es claro, usa una versión más oscura para el código y reserva el color original para el marco o el texto. Por ejemplo, un naranja #f97316 sobre blanco tiene un contraste de unos 2,8:1 (insuficiente); el naranja oscuro #9a3412 sube a más de 7:1.

Y en impresión

  • Pide el código en negro 100 % K (una sola tinta) en lugar de negro enriquecido de cuatro tintas: así no aparecen desajustes de registro en los bordes de los módulos.
  • Evita papeles de color intenso y acabados metalizados o muy brillantes.
  • Haz siempre una prueba de impresión: los colores cambian respecto a la pantalla, y el contraste real lo da el papel, no el archivo.
Categoría: Diseño e impresión Etiquetas: colores, contraste