Contraste de color en redes sociales: las reglas WCAG en la práctica

El texto de una publicación en redes sociales necesita una relación de contraste de al menos 4,5:1 con su fondo, o de 3:1 si el texto es grande. Son las cifras de WCAG 1.4.3, y el W3C las enuncia así: 4,5:1 para texto normal y 3:1 para texto de 18 puntos o más, o de 14 puntos en negrita. WCAG está escrita para contenido web, de modo que aplicarla al texto dentro de tus gráficos de Instagram o LinkedIn es una recomendación nuestra, no una regla de las plataformas.

A continuación: la fórmula, lo que pide cada nivel de WCAG y relaciones medidas en renders reales de nuestra marca de demostración AURORA. Para el sistema más amplio, consulta nuestra guía de directrices de marca para equipos pequeños.

¿Se aplica WCAG a las imágenes de redes sociales?

No directamente. WCAG cubre contenido web, y una publicación del feed es una imagen dentro de la aplicación de otra empresa. Aun así, dos criterios la convierten en una referencia razonable. El 1.4.3 trata expresamente las "imágenes de texto" como texto, de modo que un titular incrustado en un PNG está sujeto a las mismas relaciones que el texto real. Y el 1.4.5 Images of Text (nivel AA) prefiere texto real a imágenes de texto, salvo cuando la presentación es esencial o la imagen es personalizable, con los logotipos como ejemplo típico.

En nuestra experiencia, las redes sociales rara vez permiten publicar texto real sobre una imagen, así que el 1.4.5 es la salvedad honesta: un gráfico con texto es siempre un compromiso. Nuestra recomendación es mantener el texto corto, repetir el mensaje clave en el pie de foto, escribir texto alternativo y hacer que los píxeles cumplan el 1.4.3 de todos modos.

¿Qué relación de contraste se necesita, por nivel?

Criterio	Nivel	Texto normal	Texto grande	Se aplica a
1.4.3 Contrast (Minimum)	AA	4,5:1	3:1	Texto e imágenes de texto
1.4.6 Contrast (Enhanced)	AAA	7:1	4,5:1	Texto e imágenes de texto
1.4.11 Non-text Contrast	AA	3:1	3:1	Componentes de interfaz y gráficos necesarios para entender el contenido

En la práctica importan tres detalles:

• Sin redondeo. El W3C dice que los valores calculados no se redondean, así que 4,499:1 no cumple 4,5:1.
• Exenciones. Los logotipos, el texto puramente decorativo, los controles inactivos y el texto incidental en fotografías con otro contenido visual están exentos.
• Gráficos. Un icono, una línea de gráfico o el contorno de un botón que transmita significado necesita 3:1 frente a lo que lo rodea según el 1.4.11, mientras que el texto dentro del gráfico se juzga con el 1.4.3.

El texto grande se define en puntos, que un PNG no tiene. Nuestra suposición de trabajo para un gráfico de 1080 px: considera grande un titular claramente grande en la pantalla de un teléfono y trata todo lo demás, sobre todo las etiquetas pequeñas y los pies, como texto normal que necesita 4,5:1.

¿Cómo se calcula la relación de contraste?

La fórmula procede de las definiciones de WCAG. Convierte cada canal de 8 bits al rango de 0 a 1, linealízalo (divide entre 12.92 cuando el valor sea como máximo 0.04045; si no, eleva (valor + 0.055) / 1.055 a la potencia 2.4) y luego pondera: luminancia relativa L = 0.2126 R + 0.7152 G + 0.0722 B. La relación es (L1 + 0.05) / (L2 + 0.05), con L1 el color más claro. Blanco puro sobre negro puro da 21:1, el máximo.

El verde carga con la mayor parte del peso, por eso el verde brillante y el amarillo parecen claros, y por eso un verde saturado puede resultar vistoso y aun así fallar sobre blanco. WebAIM señala lo mismo: el contraste depende de la diferencia de luminancia, no de la diferencia de tono.

¿Qué miden los renders que aprueban?

Renderizamos cuatro plantillas de la marca de demostración AURORA a tamaño nativo y calculamos las relaciones con la fórmula anterior, a partir de los valores de la paleta de la marca y de píxeles muestreados en los PNG.

Casi negro #0A0A0A sobre blanco roto #FAFAF7 mide 18,93:1. La pequeña etiqueta gris del pie usa #6F6F6F, y sus píxeles muestreados midieron 4,81:1 frente al fondo. Supera 4,5:1 por un margen estrecho y es texto diminuto, así que es el único elemento de esta publicación al que seguiríamos prestando atención.

Esta combina casi negro con dos rellenos claros distintos. El titular, la pequeña etiqueta PASS y el texto blanco roto de la píldora sobre negro miden 18,93:1 en los píxeles muestreados. El pequeño logotipo de AURORA está sobre el bloque verde, y casi negro sobre verde #00D084 mide 9,76:1. El verde es un buen relleno para texto oscuro y un mal color para el texto en sí; el par inverso, verde sobre casi negro, da los mismos 9,76:1 por la simetría de la fórmula.

El texto sobre un degradado no tiene una única relación, así que mide el peor punto. WebAIM señala que WCAG no da un método para los degradados y sugiere probar la zona de menor contraste. El titular está sobre una tarjeta esmerilada; muestreando cada píxel de fondo bajo él, la relación más baja que obtuvimos estuvo entre aproximadamente 15 y 17, y la pequeña etiqueta sobre una mancha más verde quedó cerca del extremo inferior de ese rango.

La opacidad también reduce el contraste. Esta plantilla fija el texto de cuerpo al 75% de opacidad; el color de texto resultante midió más de 7:1 sobre el fondo melocotón, todavía muy por encima de 4,5:1.

Texto	Fondo	Relación	4,5:1	3:1
Casi negro #0A0A0A	Blanco roto #FAFAF7	18,93	Aprueba	Aprueba
Gris suave #6F6F6F	Blanco roto #FAFAF7	4,81	Aprueba	Aprueba
Casi negro #0A0A0A	Verde #00D084	9,76	Aprueba	Aprueba
Verde #00D084	Casi negro #0A0A0A	9,76	Aprueba	Aprueba
Titular y etiqueta sobre la tarjeta con degradado (valor más bajo muestreado)	Degradado esmerilado	alrededor de 15 a 17	Aprueba	Aprueba
Cuerpo al 75% de opacidad	Degradado de melocotón a rosa	más de 7	Aprueba	Aprueba

¿Qué combinaciones de nuestra paleta fallan?

Los cuatro renders aprueban porque los colores de las plantillas están bloqueados en una paleta que se comprobó una vez, no cada vez que alguien escribe una publicación. No renderizamos una publicación suspendida: el motor nunca deja que un miembro elija un mal color, y ese es el objetivo. Pero la misma paleta contiene pares que fallarían si alguien los usara, calculados con la misma fórmula:

Texto	Fondo	Relación	4,5:1	3:1
Blanco #FFFFFF	Verde #00D084	2,03	Falla	Falla
Blanco roto #FAFAF7	Verde #00D084	1,94	Falla	Falla
Verde #00D084	Blanco roto #FAFAF7	1,94	Falla	Falla
Naranja #FF6B35	Blanco roto #FAFAF7	2,71	Falla	Falla
Gris suave #6F6F6F	Rosa #FFB3D1	3,02	Falla	Aprueba

La fila del blanco sobre verde es la trampa habitual. El texto blanco sobre un verde de marca brillante se ve bien en un buen monitor y se queda a más de la mitad de lo exigido. Los colores de acento brillantes funcionan mejor como relleno para texto oscuro, como en el bloque verde del render anterior.

¿Cómo se comprueba el contraste en tus propios gráficos?

1. Anota cada par de texto y fondo de tu plantilla, incluidas etiquetas, pies y texto de botones.
2. Calcula cada relación con la fórmula anterior o con cualquier comprobador de contraste WCAG, usando valores hexadecimales exactos, nunca capturas de pantalla de imágenes comprimidas.
3. Exige 4,5:1 al texto normal. Admite 3:1 solo para texto claramente grande en un teléfono.
4. Para texto sobre degradados o fotos, mide el peor punto bajo el texto o coloca detrás un panel sólido o semitransparente.
5. Comprueba la opacidad: un color de texto al 60% es otro color.
6. No dependas solo del color para transmitir significado, como rojo frente a verde para malo y bueno (WCAG 1.4.1 Use of Color).
7. Vuelve a comprobar cuando cambie la paleta de la marca, no cuando se escribe una publicación.

La tipografía decide qué texto cuenta como grande, así que lee a continuación nuestra guía de tipografía para publicaciones en redes sociales y consulta nuestros principios de composición para gráficos de redes sociales para colocar texto sobre zonas recargadas. Si quieres la comprobación integrada en el flujo de trabajo, Chikaboom bloquea los colores de las plantillas para que los miembros rellenen el texto sin cambiarlos; puedes probarlo en la demo en vivo.