Identidad visual accesible: marca, color y contraste sin conflicto

¿Qué dice WCAG sobre la marca?

El criterio 1.4.3, Contraste (mínimo), de nivel AA, exige una relación de contraste de al menos 4,5:1 para el texto y las imágenes de texto, con una excepción para el texto grande (3:1) y otra para los logotipos: “el texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste”. La explicación oficial añade lo que más interesa a una marca: el texto con contraste insuficiente por directrices de identidad corporativa no queda exento. La exención es solo para el logotipo.

El criterio 1.4.11, Contraste no textual, también de nivel AA, extiende la regla a elementos que no son texto. Los logotipos están exentos, bajo el supuesto de que sus colores pueden venir impuestos por la identidad corporativa. Hay un matiz: si un logotipo normalmente tiene contraste suficiente pero el autor decide presentarlo con contraste insuficiente, esa presentación no se considera esencial y no queda exenta.

Los umbrales, en resumen:

¿Qué cuenta como componente de interfaz?

El criterio 1.4.11 cubre la información visual necesaria para identificar los componentes y sus estados, salvo los componentes inactivos. Incluye el indicador de foco, que debe tener contraste suficiente frente al fondo adyacente, y cualquier señal que indique un estado, como si un elemento está seleccionado o enfocado. El borde de un campo de texto, la marca de una casilla o el icono de un menú abierto entran en esta evaluación cuando son lo que permite identificar el componente. Tampoco aplica si la apariencia del componente la define el navegador y el autor no la modifica.

El W3C advierte además que los valores calculados no se redondean: 2,999:1 no cumple 3:1, igual que 4,499:1 no cumple 4,5:1. Las líneas y formas finas pueden verse con un color mucho más tenue por el suavizado (antialiasing), con un contraste real mucho menor, así que conviene medir el resultado renderizado y no solo el color en el archivo de diseño.

¿Cómo se audita una paleta de marca?

Las fuentes consultadas dan los criterios, no un procedimiento específico para paletas. La práctica que se deduce de ellos es esta:

1. Lista los colores de marca y sus usos reales: fondos, textos, bordes, iconos, estados.
2. Prueba cada par de texto y fondo contra 4,5:1, o 3:1 si el texto es grande. La matemática del contraste de color explica cómo se obtiene la relación.
3. Prueba los componentes contra 3:1 en cada estado, incluido el foco.
4. Documenta qué pares son válidos y cuáles no deben usarse.
5. Decide qué hacer con los que fallan: oscurecer o aclarar el tono, pasar a texto grande, o reservar el color para elementos que no sean texto.

Esa documentación se convierte en la base del sistema de diseño y de las paletas y tokens de color, donde cada par debe llevar una nota de uso.

¿Y la tipografía de marca?

El criterio 1.4.12, Espaciado del texto (AA), no pide usar un espaciado concreto. Pide que no se pierda contenido ni funcionalidad cuando la persona aplica, como mínimo, una altura de línea de 1,5 veces el tamaño de fuente, un espacio tras los párrafos de 2 veces, un interletraje de 0,12 y un espaciado entre palabras de 0,16. La tipografía de marca, entonces, debe tolerar esos cambios sin que el texto se corte ni se superponga.

El criterio tampoco se aplica al texto convertido en imagen para lograr un efecto visual, así que ese texto no se adapta. Si la identidad usa texto dentro de imágenes, conviene usar texto real siempre que sea posible, para que la persona pueda ajustarlo.

Ejemplo

Ejemplo ilustrativo: una marca de bebidas tiene un verde intenso, #00A651, como color principal. Al probarlo como fondo de un botón con texto blanco, el par da 3,2:1: sirve para texto grande, pero falla el 4,5:1 del texto normal. El equipo oscurece el verde del botón a #157A3C, que da 5,4:1 con el blanco, y mantiene el color original en el logotipo, que está exento, y en las ilustraciones. Para los enlaces de texto sobre fondo blanco usa también el verde oscuro. La identidad gana una variante para la interfaz, y el color original sigue apareciendo donde no compite con texto pequeño.

Para tu próxima revisión: toma el color de marca más usado, prueba su texto sobre los fondos más comunes y anota con qué combinaciones funciona. Esa lista es la mitad del trabajo.

¿Cuándo NO conviene forzar la paleta de marca?

• Cuando la identidad se usa solo en impresión y no hay interfaz digital. Las pautas WCAG aplican al contenido web.
• Cuando el color es el único elemento que distingue la marca y no hay forma de adaptarlo. Entonces conviene revisar la estrategia de marca con quien la define.
• Cuando el contraste requerido haría que la marca sea irreconocible. Entonces la variante accesible puede limitarse a la interfaz, y el color original quedarse en el logotipo y los elementos decorativos.

Errores comunes

• Asumir que toda la marca está exenta porque es corporativa. Solo lo está el logotipo o nombre de marca.
• Probar el logotipo y dar por cumplida la identidad completa.
• Usar el color de marca para texto pequeño sin medir el contraste.
• Olvidar los estados de foco en componentes con color de marca.
• Redondear el resultado: 4,49:1 no cumple 4,5:1.
• Decidir la paleta sin probarla y corregir componente por componente después.

Relacionado en la wiki

Para las reglas generales, lee WCAG explicado. Para validar que la identidad funciona con tecnologías de asistencia, las pruebas con lectores de pantalla completan la auditoría.

Fuentes

• Understanding SC 1.4.3: Contrast (Minimum), W3C WAI (WCAG 2.2): 4,5:1, 3:1 para texto grande, exención del logotipo, redondeo e identidad corporativa.
• Understanding SC 1.4.11: Non-text Contrast, W3C WAI (WCAG 2.2): 3:1 para componentes y gráficos, estados, foco, logotipos, redondeo y antialiasing.
• Understanding SC 1.4.12: Text Spacing, W3C WAI (WCAG 2.2): valores de espaciado y texto en imágenes.