Por User Media el
Contraste en diseño: el W3C pide 4,5 a 1 entre el texto y su fondo
Haz que ofertas, precios y botones se distingan en tus imágenes: combina color, tamaño y espacio, y compruébalos antes de publicar.
Un 4,5:1 no basta por sí solo para que el texto pequeño se lea sobre una foto. El contraste en diseño es la diferencia que separa elementos para que tu cliente distinga qué mirar, qué significa y qué puede hacer; un fondo de tono medio puede dificultar la lectura tanto con texto negro como blanco, como advierte MDN.
¿Qué es el contraste en diseño y por qué cambia un anuncio?
El contraste convierte una imagen concurrida en una secuencia que se entiende de un vistazo. No consiste solo en colores opuestos: hace visible la diferencia entre el mensaje principal, el producto, el precio y la acción. Cuando esas partes se parecen demasiado, compiten por la misma mirada.
Una pieza comercial clara deja que una idea llegue antes que los detalles. En una promoción, esa idea puede ser el porcentaje, el precio o la fecha; el producto la acompaña y el botón queda disponible para quien ya entendió la oferta. El orden cambia según el objetivo de la pieza.
¿Qué diferencia hay entre color, tamaño, forma y tipografía?
Cada tipo de contraste resuelve una diferencia que el color solo no puede cargar. El contraste de color, la diferencia de luminosidad o tono entre elementos, separa capas; el de tamaño marca prioridad; el de forma distingue controles; y el de tipografía usa peso, estilo o espaciado para separar mensajes.
| Recurso | Qué distingue | Ejemplo |
|---|---|---|
| Color | Texto y fondo | Franja oscura |
| Tamaño | Idea principal | Precio mayor |
| Forma | Acción o estado | Botón definido |
| Espacio | Bloques de información | Aire alrededor |
El espacio alrededor de una oferta también crea contraste aunque no cambie ningún color. En una ficha de producto, nombre, precio, disponibilidad y botón se reconocen mejor al variar tamaño, peso y separación. Así, el estado «Disponible» no queda comunicado únicamente por verde; esta lógica también guía las tiendas en línea que diseñamos.
¿Cómo se aplica el contraste en un anuncio o una publicación?
Un anuncio funciona mejor cuando producto, promesa y acción tienen papeles visuales distintos. En un anuncio de 1080×1350, una foto puede ocupar el fondo, pero una franja uniforme oscura reserva el lugar de la oferta. El precio gana tamaño, la condición queda cerca y el llamado a la acción no compite con ambos.
El rojo puede llamar la atención, pero necesita otra señal para explicar una promoción. La guía de W3C WAI indica que el color no debe ser el único medio para comunicar información o una acción. «Oferta» junto al porcentaje o la fecha conserva el significado para más personas y contextos.
En formatos pequeños, la información esencial necesita existir fuera de la imagen cuando la plataforma lo permite. Google Ads aconseja evitar texto superpuesto en imágenes de anuncios responsive de display porque puede resultar difícil de leer en tamaños reducidos; en ese formato, la imagen y los titulares funcionan como activos separados, según Google Ads Help.
¿Cómo poner texto sobre una foto sin que se pierda en el celular?
El texto sobre fotografía se sostiene con una zona tranquila, no con buena suerte. Una portada web puede ubicar el titular sobre un área uniforme de la imagen o sobre una capa de color. La foto sigue aportando contexto, mientras el bloque de texto conserva un fondo consistente; es un criterio útil para landing pages orientadas a una acción.
Una foto, un degradado y una transparencia exigen mirar varios puntos del fondo. WebAIM recomienda tomar muestras con cuentagotas y revisar manualmente los fondos complejos; también propone ampliar el texto entre 130 % y 150 % como prueba recomendada, no como requisito de WCAG, en su guía de evaluación.
La lectura cambia entre el computador, el celular y la luz intensa. Apple recomienda revisar colores en contexto claro, oscuro y de contraste aumentado, además de probar distintas condiciones de iluminación, porque la luz puede apagar los colores. Una pieza se decide con su tamaño final de uso, no solo en el lienzo de diseño.
¿Qué contraste de color pide la accesibilidad web?
Para contenido web, AA pide 4,5:1 en texto normal y 3:1 en texto grande. Las WCAG 2.2 del W3C fijan esos mínimos para texto e imágenes de texto; en AAA, suben a 7:1 y 4,5:1 respectivamente. Los componentes de interfaz y objetos gráficos necesarios también requieren 3:1 frente a colores adyacentes en AA.
El tamaño grande permite otro mínimo, pero no reemplaza la prueba de lectura. MDN define texto grande como 18 pt, aproximadamente 24 px, en regular, o 14 pt, aproximadamente 18,7 px, en negrita. Esta referencia sirve para interfaces y páginas web; una creatividad social necesita además una revisión visual por su foto, tipografía y escala final.
¿Cómo comprobar antes de publicar que una pieza sí se lee?
La comprobación reúne una medición de color y una mirada en el contexto real. El Contrast Checker de WebAIM permite ingresar colores HEX o RGB y ver la relación y el resultado para AA o AAA en texto normal, grande y contraste no textual. En una foto, esa medición se completa con revisión visual.
- Mira la pieza reducida al tamaño en que aparecerá en el celular.
- Identifica qué se ve primero: promesa, producto o acción, según el objetivo.
- Comprueba el par de colores del texto, botón o ícono cuando el contenido es web.
- Revisa los puntos claros y oscuros si hay fotografía, degradado o transparencia.
- Confirma que oferta, error o disponibilidad tengan texto, forma o ícono además del color.
- Prueba la pieza en luz intensa y, cuando aplique, con mayor contraste del sistema.
Una lista breve evita que un detalle visual cambie el sentido de una oferta. Antes de publicar una campaña, este control se integra bien al trabajo de creatividades para Meta Ads: la revisión no promete más clics, pero sí confirma que el mensaje y la acción siguen distinguiéndose en la pieza final.
Preguntas frecuentes sobre contraste en diseño
¿Un texto grande puede usar menos contraste que uno pequeño?
El texto grande tiene un umbral menor en WCAG, pero aún debe poder leerse en su contexto. Para AA, el mínimo es 3:1 para texto grande frente a 4,5:1 para texto normal. La tipografía fina, una foto variable o una reducción para celular pueden exigir una solución visual más clara.
¿Basta con usar rojo para señalar una promoción, un error o una oferta?
El color ayuda a encontrar una señal, pero no debe cargar su significado por sí solo. Una etiqueta puede combinar rojo con «Oferta», el porcentaje o la fecha; un error puede sumar un ícono y una explicación. Esa redundancia mantiene la información cuando el color se percibe distinto o pierde fuerza.
¿Contraste y armonía son lo mismo en diseño gráfico?
La armonía hace que los elementos pertenezcan al mismo sistema y el contraste marca sus diferencias. Una paleta puede sentirse coherente y, aun así, dejar un precio, botón o titular demasiado cerca del fondo. El equilibrio aparece cuando la identidad conserva unidad y la información conserva prioridad.
¿Se puede usar texto encima de una imagen en anuncios de Google?
El texto superpuesto puede funcionar en una pieza, pero depende del formato y del tamaño final. Para anuncios responsive de display, Google Ads aconseja entregar imagen y titulares por separado porque la superposición puede leerse mal en tamaños pequeños. En otros usos, una zona uniforme y la comprobación final reducen el riesgo de que el mensaje se pierda.
¿Necesitas que tus anuncios se lean a la primera?
En User Media diseñamos piezas y páginas donde la oferta, el producto y la acción tienen un orden claro. Hablemos de tu próxima campaña.
