Ir al contenido principal
miji.be

Código QR conforme a WCAG

Diseño de accesibilidad que aplica los criterios de las WCAG (Web Content Accessibility Guidelines) a la ubicación / el texto alternativo / el contraste de color de los códigos QR.

31 oct 2026 / Lectura de aproximadamente 1 min

Código QR

El código QR conforme a WCAG se refiere a la iniciativa de aplicar los criterios de las Web Content Accessibility Guidelines (WCAG) a la presentación / el suministro de códigos QR para que todas las personas, incluidas las personas con discapacidad, puedan acceder a ellos. Un código QR es contenido no textual que se muestra como imagen, y el criterio 1.1.1 Non-text Content (nivel A) de las WCAG 2.2 exige que el contenido no textual que se presenta a los usuarios tenga una alternativa textual que cumpla el mismo propósito.

Un código QR conforme a WCAG necesita varios elementos. En primer lugar, indicar como texto alternativo (atributo alt) la URL de destino o el propósito del código QR. En segundo lugar, asegurar un contraste suficiente entre el color de primer plano y el color de fondo del código QR. En las WCAG 2.2, el valor de 4,5:1 lo exige el criterio para el texto (1.4.3 Contrast (Minimum), nivel AA), mientras que el criterio que corresponde a gráficos no textuales como los códigos QR es 1.4.11 Non-text Contrast (también nivel AA), que exige 3:1. En esta entrada se toma 4,5:1 como referencia, con margen para la lectura. Además, si se coloca un enlace de texto cerca del código QR, se puede llegar a la misma información incluso en entornos donde no se puede leer el código QR.

Entre los ejemplos de implementación al generar códigos QR con un acortador de URL se encuentran los siguientes. Mostrar como texto la URL corta de destino justo debajo de la imagen del código QR. En los materiales impresos, dejar un margen (zona de silencio) alrededor del código QR. Si se ofrece una función de personalización de colores, incorporar una comprobación automática de la relación de contraste.

Como medida para las personas con discapacidad visual, un método es configurar texto alternativo o etiquetas ARIA para que los lectores de pantalla puedan leer en voz alta la presencia y el propósito del código QR.

¿Te resultó útil este artículo?

Términos relacionados

Accesibilidad de los códigos QR

Conjunto de consideraciones de diseño para que todos los usuarios, incluidas personas con discapacidad visual o mayores, puedan utilizar códigos QR sin barreras.

Código QR en color

Código QR con colores personalizados en primer plano o fondo. Permite adaptar el diseño a la identidad de marca, pero exige mantener una relación de contraste suficiente.

Tamaño mínimo de código QR

El tamaño mínimo de impresión para que un código QR se lea correctamente. Depende del volumen de datos, la calidad de impresión y la distancia de lectura.

Diseño de código QR

La práctica de personalizar la apariencia del código QR con colores, formas y marca manteniendo la capacidad de escaneo.

Texto alternativo (alt)

Texto que describe el contenido de una imagen. Se muestra cuando la imagen no puede cargarse y es leído por los lectores de pantalla.

Código QR

Un código de barras bidimensional que almacena datos en una matriz de cuadrados blancos y negros, legible por cámaras de smartphones.

Artículos relacionados

Lo básico sobre códigos QR - cómo funcionan, cómo leerlos y cómo crearlos, explicado desde cero

Qué es un código QR, en qué se diferencia del código de barras, cómo leerlo y crearlo gratis. Incluye trucos con URL acortadas y usos prácticos.

Accesibilidad y URLs cortas - Lectores de pantalla, texto de enlace y códigos QR

Explica cómo las URLs cortas afectan a usuarios con discapacidad visual, usuarios mayores y usuarios con discapacidades cognitivas. Cubre problemas de lectura de URLs con lectores de pantalla, diseño de texto de enlace conforme a las directrices WCAG y métodos para crear códigos QR accesibles, con datos concretos y consejos prácticos.

Códigos QR y URLs cortas - Conectando experiencias offline y online

Aprende cómo la combinación de códigos QR con URLs cortas conecta impresos, eventos y puntos de contacto de tu negocio directamente con la web.

Pon los términos en práctica

Acorta una URL gratis