Técnica Técnicas generales WCAG 2.2
G207Dar a los iconos un contraste de al menos 3:1 con su fondo
Nombre oficial en el W3C: Garantizar una relación de contraste de al menos 3:1 entre los iconos y sus fondos
En pocas palabras
Los iconos necesarios para entender o usar la página, como la lupa del buscador o el icono del carrito, deben distinguirse bien del fondo. La relación de contraste entre el color del icono y el color que lo rodea debe ser de al menos 3:1. Si el fondo es un degradado, se mide en la zona menos favorable.
Por qué es importante
Un icono gris claro sobre blanco casi desaparece para personas con baja visión o personas mayores. También para cualquiera que mire el móvil a pleno sol.
Si el icono es la única pista de lo que hace un botón, no verlo significa no poder usarlo. Es un requisito de nivel AA (criterio 1.4.11), el que exigen la norma EN 301 549 y el Real Decreto 1112/2018.
Cómo se hace
- Identifique los iconos que hacen falta para entender o usar la página. Los puramente decorativos quedan fuera.
- Mida el contraste entre el color del icono y el color que tiene justo al lado. Debe ser de 3:1 o más.
- Si el icono está dentro de un círculo o botón de color, mídalo contra ese color, no contra el fondo de la página.
- Si el fondo es un degradado o una foto, mida en la zona con menos contraste. Si una parte no llega, imagine el icono sin esa parte: debe seguir reconociéndose.
- Si no llega a 3:1, oscurezca o aclare el icono o su fondo hasta alcanzarlo.
Ejemplo práctico
Un caso muy común: la cabecera de una tienda online con iconos sin texto (buscar, mi cuenta, carrito). Se dibujan en gris claro para que «no recarguen» el diseño. Pero el icono es lo único que indica su función. Por eso debe alcanzar un contraste de 3:1 con su fondo.
Así no: Iconos gris claro sobre fondo blanco
Los iconos usan el gris #B3B3B3 sobre blanco. Su contraste es de 2,1:1, por debajo del 3:1 que pide el criterio 1.4.11. Con poca vista, con poco brillo o al sol, la lupa y el carrito apenas se ven.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<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>Así sí: Iconos con contraste suficiente
Solo cambia el color. El morado #744E9A sobre blanco da 6,4:1, por encima de 3:1. Los iconos usan currentColor, así que basta con cambiar la propiedad color del enlace.
Pruébelo aquí:
Ver el código del ejemplo correcto
<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>Cómo comprobarlo
Errores frecuentes en auditorías
- Iconos de cabecera, pie o redes sociales en gris claro sobre blanco. Por ejemplo,
#CCCCCCda solo 1,6:1. - Iconos blancos sobre un color corporativo claro. Por ejemplo, blanco sobre
#44AFE4da 2,5:1. - Medir el icono contra el fondo de la página cuando está dentro de un círculo o botón de color. Hay que medirlo contra ese color.
- Poner iconos sobre fotos o degradados sin medir la zona con menos contraste.
Para saber más, en nuestro blog
-
Los mejores analizadores de contraste de colorDescubre 7 herramientas que te ayudarán a dotar de un buen contraste a tu web o a tus documentos
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica G207 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica G207 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.