Fondos complejos: transparencias, degradados, imágenes y vídeo

Medir el contraste de un texto negro sobre un fondo blanco es inmediato. Lo difícil llega con el diseño real: textos semitransparentes, degradados, fotografías de cabecera, vídeos de fondo o efectos de cristal esmerilado. En la lección sobre contraste de texto vimos la regla general: se mide contra el fondo real, en la zona de peor contraste. Esta lección enseña a aplicar esa regla en los casos complicados, a calcular el color resultante de una transparencia y, sobre todo, a diseñar de forma que el contraste no dependa de la suerte.

Transparencias: calcula el color que realmente se ve

Muchos sistemas de diseño definen el texto secundario como «negro al 60 %» o los textos sobre botones como «blanco al 80 %». La fórmula de contraste no trabaja con transparencias: necesita el color resultante después de componerlo con el fondo. Para cada canal (rojo, verde y azul) el cálculo es:

resultado = opacidad × color_del_texto + (1 − opacidad) × color_del_fondo

Con ese color ya puedes calcular el ratio. Algunas equivalencias útiles con texto negro sobre fondo blanco:

Texto	Color resultante	Ratio sobre blanco	Uso posible
Negro al 87 %	#212121	16,1:1	Texto principal
Negro al 60 %	#666666	5,7:1	Texto secundario
Negro al 54 %	#757575	4,6:1	Límite para texto normal
Negro al 50 %	#808080	3,9:1	Solo texto grande o componentes
Negro al 38 %	#9E9E9E	2,7:1	Solo elementos deshabilitados o decorativos

Dos trampas habituales. La primera: la transparencia se calcula contra el fondo concreto. «Negro al 54 %» cumple sobre blanco, pero sobre una tarjeta gris claro baja de 4,5:1. La segunda: la propiedad CSS opacity en un contenedor afecta a todo lo que tiene dentro, incluido el texto, aunque el texto tenga un color sólido.

/* Incorrecto: el texto blanco al 70 % sobre azul #0056B3 queda en #B2CCE8: 4,3:1 */
.boton { background: #0056B3; color: rgba(255, 255, 255, 0.7); }

/* Incorrecto: opacity reduce también el contraste del texto de la tarjeta */
.tarjeta-destacada { opacity: 0.8; }

/* Correcto: texto blanco sólido, 7,0:1 */
.boton { background: #0056B3; color: #FFFFFF; }

Degradados

En un degradado, el fondo cambia a lo largo del texto. Hay que medir el punto peor de toda la zona que ocupa el texto, no el promedio. Un título blanco sobre un degradado de azul oscuro #0D47A1 (8,6:1) a azul claro #64B5F6 (2,2:1) cumple al principio de la frase y falla al final.

Además, el texto se mueve: en el móvil puede partirse en tres líneas y caer sobre la zona clara, o el degradado puede estirarse con el ancho de la pantalla. Cómo resolverlo:

• Limitar el recorrido del degradado para que todos sus tonos cumplan con el color del texto.
• Colocar el texto sobre una caja de color sólido o una franja oscura.
• Comprobar el resultado en varios anchos de pantalla, no solo en el de escritorio.

Texto sobre fotografías

Es el caso más frecuente en cabeceras, portadas de noticias, carruseles y tarjetas de producto, y uno de los que más fallan, porque las herramientas automáticas no lo evalúan. La solución más robusta es pensar en el peor caso: que justo detrás del texto haya una zona blanca de la imagen (un cielo, una pared, un reflejo).

La regla de la capa oscura

Si colocas una capa negra semitransparente entre la foto y un texto blanco, el peor caso es un píxel blanco de la foto. Con una capa al 55 % ese píxel se convierte en #737373 y el texto blanco obtiene 4,7:1; con una capa al 60 %, #666666 y 5,7:1. Es decir: una capa negra de al menos el 55 % (mejor el 60 %, por margen) garantiza 4,5:1 para texto blanco sobre cualquier fotografía. Con una capa al 50 % solo llegas a 3,9:1, suficiente únicamente para texto grande.

La capa puede ser un degradado que solo oscurece la parte inferior de la imagen, donde está el texto; lo importante es que en toda la zona del texto alcance esa opacidad.

Otras soluciones

• Caja sólida o semitransparente detrás del texto: la misma regla del peor caso se aplica a su opacidad.
• Texto fuera de la imagen: debajo o al lado. Es la opción más sencilla y la más legible.
• Contorno o sombra marcada en las letras: un borde que rodea cada letra puede contar como parte de su fondo, pero es difícil de controlar y de demostrar en una auditoría; úsalo como refuerzo, no como única solución.

Imágenes responsive y dirección de arte

Una misma cabecera se recorta de forma distinta en escritorio, tableta y móvil. La zona que queda detrás del texto cambia, y con ella el contraste. Mide en los tres anchos, y en los carruseles mide cada diapositiva. Si el contenido lo suben terceros (anuncios inmobiliarios, fichas de producto, noticias), la protección tiene que estar en la plantilla, no en la buena voluntad de quien sube la foto.

Vídeos de fondo, cristal esmerilado y fondos que cambian

• Vídeo de fondo: el contraste debe cumplirse en todos los fotogramas, así que aplica la regla de la capa oscura. Además, si el vídeo se mueve más de 5 segundos de forma automática, necesita un control para pausarlo (2.2.2 Poner en pausa, detener, ocultar), algo que tratamos en el curso de multimedia.
• Efecto cristal esmerilado (backdrop-filter: blur() y fondos translúcidos): el desenfoque no aumenta el contraste. Lo que hay detrás cambia al desplazar la página, de modo que un menú legible sobre un párrafo blanco deja de serlo sobre una foto. Usa un fondo con suficiente opacidad y respeta la preferencia de transparencia reducida que verás en la lección sobre modo oscuro y preferencias.

Componentes y foco sobre fondos complejos

El criterio 1.4.11 Contraste no textual también se aplica sobre imágenes: las flechas y puntos de un carrusel, los iconos sobre una foto o el indicador de foco de una tarjeta deben tener 3:1 contra lo que tienen al lado. Como el fondo varía, la técnica más fiable es el doble contorno: una línea clara y otra oscura juntas, de forma que siempre una de las dos contraste.

/* Indicador de foco que funciona sobre cualquier fondo */
.tarjeta-imagen a:focus-visible {
  outline: 3px solid #FFFFFF;
  box-shadow: 0 0 0 6px #1A1A1A;
}

/* Controles del carrusel con fondo propio en lugar de iconos sueltos sobre la foto */
.carrusel-boton { background: rgba(0, 0, 0, 0.6); color: #FFFFFF; border: 2px solid #FFFFFF; }

El documento oficial de comprensión del criterio, Understanding 1.4.3 Contrast (Minimum), explica también cómo tratar los contornos de las letras y los fondos de imagen.

Resumen

• Las transparencias se miden con el color resultante: opacidad × texto + (1 − opacidad) × fondo. Negro al 54 % es el límite sobre blanco; opacity en un contenedor también afecta al texto.
• En degradados e imágenes mide el punto peor, en todos los anchos de pantalla y en cada diapositiva de un carrusel.
• Una capa negra de al menos el 55 % (mejor el 60 %) garantiza 4,5:1 al texto blanco sobre cualquier foto; ponla en la plantilla.
• Vídeos de fondo y efectos translúcidos deben cumplir en todo momento; el desenfoque no añade contraste.
• Iconos, controles e indicadores de foco sobre imágenes necesitan 3:1: un doble contorno claro y oscuro funciona sobre cualquier fondo.