La accesibilidad y la imagen de marca suelen presentarse como opuestas, como si una tuviera que ceder ante la otra. El problema real es mucho más limitado. Este artículo está dirigido a los equipos de comunicación y a los diseñadores que son responsables de una paleta y a quienes se les ha dicho que no cumple.
Qué exige la norma
Las WCAG 2.2 exigen una relación de contraste de al menos 4,5:1 para el texto y de 3:1 para el texto grande, que definen como al menos 18 puntos, o 14 puntos en negrita. Los componentes de la interfaz de usuario y los gráficos con significado necesitan 3:1 respecto a lo que tienen al lado. Además, el color no puede ser la única forma de mostrar la información. El texto que forma parte de un logotipo o de un nombre de marca no tiene requisito de contraste.
Es el fallo más común que existe. El estudio de WebAIM de 2026 sobre el millón de páginas de inicio principales encontró texto de bajo contraste en el 83,9 % de ellas, con un promedio de 34 casos por página.
“La mayoría de las paletas no fallan. Fallan determinadas combinaciones.”
Cómo se ve eso en una paleta real
Nuestro propio logotipo usa seis colores, uno por cada idioma de la animación de la parte superior de nuestra página de inicio. Sobre blanco, el azul mide 6,16:1, el violeta 5,72:1 y el rosa 4,84:1, por lo que los tres podrían usarse para texto principal. El naranja mide 4,30:1, el verde 4,38:1 y el ámbar 3,65:1. Esos tres fallan en texto pequeño y aprueban en texto grande.
No cambiamos los colores. Cambiamos sus funciones. Los seis aparecen a gran tamaño y en el logotipo. Todo el texto pequeño del sitio es casi negro o gris oscuro, con 7,23:1 o más, incluso la pequeña leyenda situada justo encima de la animación en color. La marca conserva su color, y nadie tiene que leer texto ámbar de 14 píxeles.
Cómo comprobar una paleta
- Enumere cada combinación: cada color de texto sobre cada fondo en el que vaya a aparecer, incluidos los estados al pasar el cursor y el texto sobre fotografías.
- Marque cada combinación como válida para texto principal, válida solo para texto grande o no válida.
- Asigne a cada color una función a partir de esa tabla: texto, gran formato, relleno o decoración.
- Cuando un color tenga que usarse en texto pequeño, oscurézcalo ligeramente en lugar de sustituirlo. Los lectores reconocen el tono, no el valor exacto.
- Identifique lo que solo indica el color, como enlaces, errores y líneas de gráficos, y añada un subrayado, un icono o una etiqueta.
Déjelo por escrito
Una paleta sobrevive a un traspaso cuando las directrices dicen qué puede hacer cada color, no solo cuál es su valor. Incluya la tabla en la guía de marca. La próxima persona que cree una página de campaña no tendrá que averiguarlo, y la marca seguirá pareciéndose a sí misma.