Manejo de gradientes e imágenes de fondo

A veces el texto no se apoya sobre un color de fondo uniforme, sino sobre un gradiente o una imagen de fondo. En esos casos no basta con comparar dos colores declarados para decidir si hay una falla de contraste de color (CC), así que el detector recurre a un análisis visual del elemento.

Esta página explica, en lenguaje sencillo, cómo funciona hoy ese análisis.

En resumen

Las pautas de accesibilidad piden que el texto se distinga con claridad de lo que tiene detrás: una relación de al menos 4.5:1 para texto normal y 3:1 para texto grande y elementos no textuales, como los iconos.

Cuando el texto se apoya sobre un color plano, esto es aritmética simple: el detector lee los dos colores declarados en la hoja de estilos y los compara.

Cuando el texto se apoya sobre un gradiente o una fotografía, no hay un único color de fondo que leer. Entonces el detector mira lo que realmente se pinta en pantalla, revisa muchos puntos por detrás del texto y reporta el peor de ellos, porque quien lee tiene que leer la línea completa, no solo la parte más fácil.

Paso a paso

Paso 1 — Determinar sobre qué se apoya realmente el texto

Para cada fragmento de texto, el detector inspecciona el elemento y sus contenedores (varios niveles hacia arriba) para responder una sola pregunta: ¿hay un gradiente, una fotografía o una imagen detrás de estas palabras?

Cuenta como fondo con gradiente o imagen cuando encuentra:

• un gradiente CSS (lineal, radial, cónico, repetido),
• un archivo de imagen de fondo,
• o una imagen, un video o un canvas ubicado detrás del texto y que cubre la mayor parte de él.

También se contempla el caso contrario: si hay un color sólido y opaco pintado por encima de la imagen, esa imagen nunca llega al ojo de quien lee, así que se ignora y la verificación vuelve al camino simple de color plano.

Incluso cuando la hoja de estilos afirma que el fondo es un color liso, el detector vuelve a mirar los píxeles reales. Así detecta superficies que parecen variadas sin estar declaradas como gradientes: paneles semitransparentes, capas superpuestas y tintes.

Paso 2 — Esperar a que la página se vea realmente terminada

Medir demasiado pronto es la principal forma en que una herramienta de contraste se equivoca, así que antes de medir el detector:

• desplaza el elemento hasta dejarlo visible, porque muchos sitios solo cargan la foto de fondo de una tarjeta cuando esta aparece en pantalla;
• espera a que las imágenes de fondo terminen de cargar (hasta un par de segundos). De lo contrario mediría el hueco blanco donde la foto está a punto de aparecer, y reportaría texto blanco sobre blanco;
• espera a que animaciones y transiciones se asienten: los efectos de resaltado que barren el texto, o los colores de hover que aparecen con un fundido, quedarían capturados a medio camino y darían un color que nadie llega a ver.

Paso 3 — Medir

Para un gradiente CSS puro, el detector primero lee los colores declarados del propio gradiente. Compara el texto contra cada parada de color y se queda con el peor resultado. Si incluso ese peor caso pasa con holgura, la verificación termina ahí, sin capturar pantalla, lo que mantiene los escaneos rápidos.

Para una fotografía, una imagen o un gradiente que no pasó con claridad, se toma una medición precisa:

1. El texto se vuelve invisible de forma temporal, para capturar solo la superficie que tiene detrás.
2. Se toma una captura pequeña únicamente de ese elemento.
3. Se muestrean entre 150 y 300 puntos repartidos por el área exacta que ocupa el texto, no solo el centro. Una fotografía suele ser perfectamente legible en una esquina e ilegible en otra; muestrear solo el centro es lo que vuelve demasiado permisiva una revisión común con cuentagotas.
4. Se calcula el contraste en cada punto muestreado.
5. Se reporta la relación más baja encontrada, junto con el color de fondo de ese punto concreto, el peor de todos.

La transparencia se tiene en cuenta en todo el proceso: si el texto o la superficie son parcialmente translúcidos, se combinan con lo que hay debajo antes de comparar, para que los números coincidan con lo que el ojo realmente recibe.

Paso 4 — Reportar el hallazgo

Como un gradiente o una fotografía no tienen un color único, el reporte muestra el color que produjo el peor resultado y lo etiqueta con honestidad:

• gradient <color> background, approx (#hex) — un gradiente CSS
• image <color> background, approx (#hex) — una fotografía o archivo de imagen
• sampled <color> background, approx (#hex) — una superficie combinada o semitransparente que hubo que leer desde la pantalla

La palabra approx es deliberada. Le indica a quien verifica la incidencia que ese valor se midió sobre la página renderizada, así que no debe esperarse una coincidencia exacta con una línea de CSS: la superficie realmente varía de un punto a otro.

Paso 5 — Sugerir una corrección

El detector propone entonces un único cambio, nunca dos a la vez: o un nuevo color de texto, o un nuevo color de fondo. Elige el cambio que:

• se mantenga más fiel al diseño original (procura conservar la misma familia de color y el mismo tono, en lugar de saltar a un casi negro o un casi blanco), y
• apenas alcance la relación requerida, sin excederse.

Para fondos con gradiente o imagen, la sugerencia se calcula contra ese color aproximado del peor caso, de modo que una corrección que lo satisfaga se sostiene en toda la superficie.

Salvaguardas contra falsas alarmas

Buena parte del comportamiento existe justamente para no reportar problemas que no son reales:

Situación	Qué hace el detector
Imagen decorativa que en realidad no está debajo de las palabras	Detecta que la superficie real es el fondo de la página y mide contra ese
Foto de fondo todavía cargando	Espera a que cargue, en vez de medir el espacio vacío
Resaltado animado o transición de color en curso	Espera a que termine antes de capturar
Un banner, popup o capa que cubre el elemento	Omite la medición por píxeles en lugar de medir algo equivocado
Esquinas redondeadas, formas recortadas o enmascaradas	No interpreta los píxeles expuestos de las esquinas como un gradiente
Controles desplegables <select>	Muestrea solo el área de texto e ignora el icono de flecha de la derecha
La captura toma por error el propio texto	Lo detecta y descarta la muestra, volviendo a los colores declarados
Elemento dentro de un iframe, o que ya no está en la página	No se reporta, porque una persona no podría volver a verificarlo de forma fiable

Los estados hover y focus se miden de la misma manera, pero siempre con una captura nueva en ese estado: un color medido en el estado normal nunca se reutiliza para un hallazgo de hover o focus.

Qué tener en cuenta al leer un resultado

• El color de fondo reportado es una muestra representativa, no toda la superficie. Es el punto concreto donde el contraste resultó peor.
• El detector es deliberadamente estricto. Reporta el punto más difícil de leer, así que un resultado puede parecer peor que una revisión manual hecha con cuentagotas en el centro del texto. Es intencional: la legibilidad debe sostenerse en toda la línea.
• Las mediciones describen un momento concreto. Los fondos en video, o que cambian constantemente, se miden en el instante de la captura.
• Las sugerencias de corrección asumen un color sólido de reemplazo. Sobre un gradiente o una fotografía, el valor sugerido es el que funciona contra la peor zona de la superficie; aplicarlo es seguro también en el resto.
• Remedios habituales para texto sobre fotografía, más allá de cambiar el color: añadir un panel sólido o semitransparente detrás del texto, u oscurecer/aclarar la imagen en la zona donde cae el texto. El detector reporta el problema y una corrección directa de color; estas alternativas de diseño son respuestas igual de válidas al mismo hallazgo.

Relacionado

Algunas composiciones siguen siendo genuinamente difíciles de medir: fondos fijos o posicionados de forma absoluta, modos de fusión y filtros, o gradientes usados como color del propio texto. Esos casos conocidos están documentados en Límites de gradiente.