¿Cómo elijo los colores de mis placas para redes sin perder legibilidad ni violar la accesibilidad?

Las personas con baja visión, visión reducida o daltonismo (que afecta aproximadamente a 1 de cada 12 hombres) necesitan una diferencia clara de brillo entre el texto y el fondo para poder leer. La relación de luminosidad entre dos colores se calcula objetivamente mediante la luminancia relativa (la diferencia de brillo percibido entre la tipografía y su fondo). Si diseñás una placa para Instagram o X confiando solo en tu ojo o en la paleta corporativa, es muy probable que el texto no alcance el contraste mínimo indispensable. Quien no puede distinguir el texto de la imagen no se detiene a descifrarlo: simplemente pasa de largo.

• Qué hacer: Garantizá un relación de contraste mínimo de 4.5:1 para texto normal y de 3:1 para texto grande o elementos gráficos clave como botones e íconos. Cuando pongas texto sobre una foto o ilustración, agregá una placa o malla semitranslúcida de fondo para estabilizar la lectura.
• Qué omitir: No transmitas información confiando exclusivamente en el color (por ejemplo, usar verde para "aprobado" y rojo para "rechazado" sin sumar texto o íconos explicativos). Evitá usar texto fino sobre fondos complejos o cambiantes.

Ejemplo: combinación de colores y texto

• ❌ Malo: "Placa promocional con fondo amarillo claro y texto en color blanco o gris pastel" (Esta combinación no llega a la proporción mínima de 4.5:1 y resulta ilegible para personas con baja visión o bajo luz intensa).
• ✔ Bueno: "Placa promocional con fondo amarillo claro y texto en color azul oscuro o negro" (Alcanza una proporción superior a 7:1, garantizando una lectura cómoda e inclusiva para toda la audiencia).

Ejemplo: uso de datos e indicadores visuales

• ❌ Malo: "Gráfico de torta o barras que diferencia las categorías únicamente por tonos de verde y rojo"
• ✔ Bueno: "Gráfico de torta o barras que combina colores contrastantes con tramas de rayas, puntos y etiquetas de texto directas sobre cada porción"

1. Respetá las proporciones WCAG: Exigí un contraste mínimo de 4.5:1 para cuerpo de texto y 3:1 para títulos grandes, bordes e íconos.
2. Medí, no adivines: verificá las combinaciones con el verificador de contraste de AxD o con el de WebAIM, en lugar de confiar en el ojo.
3. Más que color para informar: Acompañá siempre el color con formas, texto explicativo o íconos para no dejar afuera a personas daltónicas.
4. Fondos estables sobre fotos: Si ponés texto sobre fotos o videos, colocá una capa o placa oscura detrás para que el contraste se mantenga uniforme.
5. Tipografías claras: Usá fuentes sencillas sin remates (tipo sans-serif) y con un grosor adecuado para favorecer la percepción visual.

• Colores de marca oficiales: Muy a menudo, el color principal de una marca o institución es demasiado claro para usarlo como texto sobre blanco. En esos casos, la solución no es cambiar la marca, sino crear una variante más oscura de ese color para los textos o usar el color de marca como fondo con texto oscuro/blanco encima que cumpla el 4.5:1.
• Elementos decorativos y logos: Los logotipos y los elementos puramente decorativos (como formas abstractas de fondo que no transmiten información) están exentos de cumplir con la regla de contraste. Sin embargo, cualquier ícono, botón o forma con significado funcional sí debe respetarla.