Colores de marca: cómo elegirlos para que el texto se lea

Un color de marca sirve como fondo de texto, según WCAG, cuando la razón de contraste entre ambos es de al menos 4,5 a 1, el mínimo que pide el criterio 1.4.3, nivel AA, para texto normal Fuente [1]. Para texto grande, el mínimo baja a 3 a 1 Fuente [1].

Los colores de la marca son parte de lo que Autonomah pide para empezar, junto con el logo y las publicaciones anteriores.

WCAG es un estándar de accesibilidad para contenido web Fuente [3]. Su guía aclara que los requisitos de contraste del texto también valen para el texto convertido en imagen Fuente [1], y eso es lo que pasa cuando escribes sobre una foto o un fondo de color en una publicación. No encontramos que las redes sociales exijan esta regla para las publicaciones: aplicarla a esas piezas es una recomendación nuestra.

Qué mide el contraste

La razón de contraste compara la luminosidad relativa del color más claro con la del más oscuro: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminosidad del claro y L2 la del oscuro. Va de 1 a 1, sin contraste, hasta 21 a 1 Fuente [3].

Dos datos de la guía de W3C que cambian cómo elegir un color Fuente [1]:

• El matiz no es un factor clave. El contraste se calcula de modo que importa cuánto más claro u oscuro es un color que el otro.
• Los valores se comparan sin redondear. Un 4,499 a 1 no cumple el 4,5 a 1 Fuente [1].

Cinco pares calculados, para ver cómo se comporta

Calculamos cada razón con la fórmula de WCAG Fuente [3]. Los colores son inventados para el ejemplo:

• Texto blanco sobre amarillo #F2C94C: 1,59 a 1. No cumple Fuente [3].
• Texto casi negro #1A1A1A sobre ese mismo amarillo: 10,97 a 1. Cumple Fuente [3].
• Texto blanco sobre rosa #E0457B: 3,96 a 1. Cumple solo para texto grande Fuente [1] Fuente [3].
• Texto blanco sobre rosa oscuro #B3285B: 6,23 a 1. Cumple Fuente [3].
• Texto blanco sobre azul verdoso #2E7D9A: 4,65 a 1. Cumple, con poco margen Fuente [3].

El mismo amarillo sirve con texto oscuro y no con texto blanco.

Qué cuenta como texto grande

W3C considera texto grande el de 18 puntos, o el de 14 puntos en negrita, que equivalen a unos 24 y 18,5 píxeles CSS Fuente [1]. Nuestra recomendación: si dudas del tamaño, trata el texto como normal y exige 4,5 a 1.

Lo que no es texto también tiene umbral. El criterio 1.4.11 pide al menos 3 a 1 contra los colores de al lado para los componentes de interfaz y para las partes de un gráfico que hacen falta para entenderlo Fuente [2]. Para un gráfico en tus piezas, eso alcanza a las partes que hacen falta para entenderlo.

La marca no exime al texto

Según la guía de W3C, el texto que forma parte de un logotipo o del nombre de una marca no tiene requisito de contraste Fuente [1]. Fuera de logos y logotipos, el texto con contraste insuficiente por la identidad de marca o por sus guías no queda exento Fuente [1].

Dos matices de la misma guía. Primero: si un logo normalmente tiene contraste suficiente y se muestra con poco por elección de quien diseña, esa presentación no queda exenta Fuente [1]. Segundo: el texto puramente decorativo, que no transmite información, no tiene requisito Fuente [1].

Cómo armar una paleta que se lea

Estos pasos son propuesta nuestra y no vienen del estándar:

1. Elige dos o tres colores base y decide cuál va de fondo y cuál de texto.
2. Calcula la razón de cada par con la fórmula de Fuente [3], o con cualquier verificador que la implemente.
3. Si un color de marca no alcanza con ningún color de texto, úsalo para formas y decoración, y no para texto.
4. Evita tipografías muy finas. La guía de W3C advierte que una letra delgada puede verse más tenue que el color definido, y recomienda trazos más gruesos o superar el mínimo Fuente [1].
5. Anota los pares aprobados en tu manual de marca, para que todas las piezas usen los mismos.

La web de Autonomah no menciona ninguna medición de contraste, así que esa comprobación sigue siendo tuya. Lo que sí describe es que cada pieza se crea con la identidad propia de la marca y pasa por controles automáticos de identidad y voz antes de llegar al equipo.

Lo que este texto no cubre

Qué significa cada color, o qué emoción despierta, no entra aquí. Las páginas de WCAG que leímos no tratan ese tema, y no revisamos otra fuente primaria para afirmarlo. Para el tono y la personalidad de la marca en el texto, mira cómo definir el tono de voz de una marca.

Cómo lo hace Autonomah

Autonomah es un cerebro creativo y publicista artificial: estudia cada marca, propone sus objetivos, crea las piezas y las publica en sus redes. Una persona del equipo de la marca aprueba, pide un cambio o rechaza cada pieza.

Para quien hoy elige colores y arma piezas por su cuenta, la web describe la diferencia así: Autonomah piensa qué publicar, lo produce y lo publica en su fecha, y el equipo de la marca revisa y decide.

Esa comparación, con las demás de la portada, está en la sección «Cómo se compara».

Preguntas frecuentes

Qué contraste mínimo necesita el texto?

Al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande, según el criterio 1.4.3 de WCAG Fuente [1].

Qué es el texto grande?

El de 18 puntos o el de 14 puntos en negrita, según W3C Fuente [1].

Un logo tiene que cumplir el contraste?

No: el texto de un logo o del nombre de una marca no tiene requisito de contraste en WCAG Fuente [1]. Si el logo funciona como enlace o botón, la guía recomienda considerar una variante con contraste suficiente Fuente [1].

Las guías de marca eximen al texto?

No. Fuera de logos y logotipos, el texto con poco contraste por motivos de identidad no queda exento Fuente [1].

Se redondea la razón de contraste?

No. W3C aclara que los valores calculados no se redondean: 4,499 a 1 no cumple 4,5 a 1 Fuente [1].