Técnica Técnicas generales WCAG 2.2
G207Garantizar una relación de contraste de al menos 3:1 entre los iconos y sus fondos
En resumen
Esta técnica explica cómo garantizar que los iconos gráficos necesarios para entender el contenido tengan una relación de contraste de al menos 3:1 con los colores adyacentes, incluidos los fondos con degradado. Beneficia a las personas con baja visión y a cualquier usuario que consulte la web con poca luz o en pantallas de baja calidad. Úsela al diseñar o auditar iconos de color sólido sobre fondos sólidos o degradados.
Ejemplo práctico
El caso típico es la cabecera de una tienda online con iconos sin texto (buscar, mi cuenta, carrito) dibujados en gris claro para que «no recarguen» el diseño. Como no van acompañados de texto, el icono es lo único que transmite su función y debe alcanzar 3:1 con su fondo.
Así no: Iconos gris claro sobre fondo blanco
Los iconos usan #B3B3B3 sobre blanco, con una relación de contraste de 2,1:1, por debajo del 3:1 que exige el criterio 1.4.11. Con poca vista, con brillo bajo o al sol en el móvil, la lupa y el carrito apenas se distinguen del fondo.
<style>
.acciones { display: flex; gap: 8px; }
.acciones a { display: inline-flex; width: 44px; height: 44px;
align-items: center; justify-content: center; color: #B3B3B3; }
</style>
<nav class="acciones" aria-label="Accesos de la tienda">
<a href="#" aria-label="Buscar productos">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="6"/><line x1="15" y1="15" x2="21" y2="21"/></svg>
</a>
<a href="#" aria-label="Mi cuenta">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
</a>
<a href="#" aria-label="Carrito, 2 productos">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M2 4h3l2.5 11h11l2.5-8H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
</a>
</nav>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Iconos con contraste suficiente
Solo cambia el color: #744E9A sobre blanco da 6,4:1, por encima de 3:1. Como los iconos usan currentColor, basta con modificar la propiedad color del enlace.
<style>
.acciones { display: flex; gap: 8px; }
.acciones a { display: inline-flex; width: 44px; height: 44px;
align-items: center; justify-content: center; color: #744E9A; }
</style>
<nav class="acciones" aria-label="Accesos de la tienda">
<a href="#" aria-label="Buscar productos">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="10" cy="10" r="6"/><line x1="15" y1="15" x2="21" y2="21"/></svg>
</a>
<a href="#" aria-label="Mi cuenta">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>
</a>
<a href="#" aria-label="Carrito, 2 productos">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M2 4h3l2.5 11h11l2.5-8H6"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
</a>
</nav>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Iconos de cabecera, pie o redes sociales en grises claros como
#CCCCCC(1,6:1) sobre blanco. - Iconos blancos sobre un color corporativo claro, por ejemplo blanco sobre
#44AFE4(2,5:1). - Medir el icono contra el fondo de la página cuando el fondo relevante es el círculo o botón de color que lo rodea.
- Iconos colocados sobre fotografías o degradados sin comprobar la zona de menor contraste.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Todas las tecnologías que admiten iconos gráficos.
Descripción
El objetivo de esta técnica es garantizar que los iconos gráficos ofrezcan suficiente contraste a las personas con discapacidad visual. No todos los gráficos entran en el ámbito del criterio de conformidad 1.4.11 Contraste no textual, pero si los iconos son necesarios para comprender el contenido, entonces deben tener una relación de contraste de al menos 3:1.
El criterio de conformidad sobre contraste no textual utiliza el término «objeto gráfico» para abarcar tanto los gráficos pequeños y sencillos como las partes de gráficos más grandes y complejos. Esta técnica se centra en los iconos de color sólido utilizados sobre fondos sólidos o con degradado.
Al elegir los colores de los gráficos, tenga en cuenta los colores adyacentes a cada gráfico y compruebe que la relación de contraste es de al menos 3:1.
Puede encontrar una selección de herramientas y aplicaciones para medir relaciones de contraste en Comprender el criterio de conformidad 1.4.3 Contraste mínimo.
Ejemplos
Icono de color sólido sobre el fondo
Un icono de color sólido, como el símbolo de un teléfono, utiliza el naranja sobre un fondo blanco. Se compara el color naranja (#E3660E) con el fondo blanco (#FFFFFF) y la relación de contraste resultante es de 3,4:1.
Icono de color sólido sobre un fondo personalizado
Un icono de color sólido, como el símbolo de un teléfono, utilizado dentro de un fondo naranja. Los colores naranja y blanco son los mismos que en el ejemplo 1; en este caso, el contraste con el fondo blanco no es relevante: lo que aporta la información del icono es el icono blanco dentro del fondo naranja y, por tanto, es lo que debe cumplir el requisito de contraste.
Icono de color sólido con un fondo degradado
Un icono de color sólido, como el símbolo de un teléfono, en azul oscuro sobre un fondo con degradado de blanco a azul. La primera comprobación del icono debe hacerse contra el fondo más oscuro (el de menor contraste) adyacente al color del icono. Si esa relación es de al menos 3:1, cumple el criterio de conformidad.
Icono de color sólido con un fondo degradado que se solapa en contraste
Un icono de color sólido sobre un fondo degradado puede solaparse en contraste si el gráfico sigue siendo comprensible allí donde no tiene contraste con todo el fondo. Si localiza la parte del degradado en la que no se alcanza una relación de 3:1 con el gráfico y la trata como si se hubiera eliminado, ¿sigue transmitiendo el icono el significado adecuado?
Un método para visualizarlo consiste en eliminar la zona sin contraste y comprobar que el icono se sigue entendiendo. Si es así, es suficiente. Las imágenes siguientes muestran un icono sobre un fondo degradado y una segunda versión en la que se ha eliminado la zona del icono que no alcanza la relación de contraste de 3:1. Sigue reconociéndose como el icono de un teléfono, por lo que cumple el criterio de conformidad.
Pruebas
Procedimiento
Para cada objeto gráfico necesario para la comprensión, utilizar una herramienta de contraste de color para:
- Determinar el color de primer plano del objeto gráfico.
- Determinar el color de fondo adyacente. Si el color de fondo es un degradado o un patrón, identificar el color con menor contraste respecto al color de primer plano.
- Comprobar que la relación de contraste es igual o superior a 3:1.
- Si una parte de la zona de fondo no alcanza 3:1 con el primer plano, asumir que las partes del icono adyacentes a esa zona o zonas no son visibles.
- Comprobar que el icono sigue siendo reconocible sin las zonas de contraste insuficiente.
Resultados esperados
- Las comprobaciones n.º 3 y n.º 5 son verdaderas.
Recursos
- Comprender el criterio de conformidad 1.4.3 Contraste mínimo enumera herramientas de contraste de color.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G207 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
