¿Por qué mis colores de marca fallan en contraste en la web?

Los colores de marca normalmente se eligen para impresión o logos, no para texto legible. Un tono medio que se ve bien como relleno puede quedar muy por debajo de la relación 4.5 a 1 que necesita el texto del cuerpo, así que hay que oscurecerlo o combinarlo con un color de texto distinto.

¿Qué relación de contraste debo buscar?

WCAG AA pide 4.5 a 1 para texto normal y 3 a 1 para texto grande. AAA es más estricto, con 7 a 1. Para la mayoría de los sitios, cumplir AA en el texto del cuerpo es el objetivo práctico.

Crea una paleta de colores accesible a partir de tu logo

4 pasos Unos 10 minutos

Tu logo guarda los colores de tu marca, pero los valores en bruto suelen fallar en contraste. Extráelos, pruébalos y construye a partir de los que pasan.

Un logo ya contiene los colores de tu marca, pero llevar esos valores en bruto directamente a un sitio web suele fallar las pruebas de accesibilidad en cuanto colocas texto encima. El trabajo consiste en extraer la paleta con precisión, probarla con reglas de contraste reales y luego construir los tonos de apoyo alrededor de los colores que aguantan. Así, la versión accesible sigue siendo reconociblemente tu marca, y no una aproximación deslavada.

Extrae los colores del logo

Sube el logo y saca sus colores dominantes. Así obtienes los valores hex reales en lugar de adivinarlos a ojo.

Abrir Palette

Prueba cada uno con tu texto

Comprueba cada color con el color de texto con el que piensas combinarlo. Busca una relación de al menos 4.5 a 1 para el texto del cuerpo y así cumplir con WCAG AA.

Abrir Contrast

Crea tonos claros y oscuros

Genera variantes más claras y más oscuras alrededor de los colores que pasaron, para tener opciones para fondos, bordes y estados hover.

Abrir Palette

Añade un degradado (opcional)

Mezcla dos colores de marca en un degradado CSS para encabezados o botones, si tu diseño lo necesita.

Abrir Gradient

Preguntas frecuentes

¿Por qué mis colores de marca fallan en contraste en la web?: Los colores de marca normalmente se eligen para impresión o logos, no para texto legible. Un tono medio que se ve bien como relleno puede quedar muy por debajo de la relación 4.5 a 1 que necesita el texto del cuerpo, así que hay que oscurecerlo o combinarlo con un color de texto distinto.
¿Qué relación de contraste debo buscar?: WCAG AA pide 4.5 a 1 para texto normal y 3 a 1 para texto grande. AAA es más estricto, con 7 a 1. Para la mayoría de los sitios, cumplir AA en el texto del cuerpo es el objetivo práctico.

¿Algo más ambicioso?

Hivly está hecho por CodingEagles, un estudio de software que publica aplicaciones web de producción. Si tienes un proyecto real, escríbenos.

Mira lo que hace CodingEagles →