Crea una paleta web a partir de una foto que cumpla el contraste

Apuntas un extractor de colores a una foto de un bosque o de un plato de comida y te devuelve ocho muestras. Juntas se ven preciosas. Entonces pones la más bonita en un titular, defines el texto del cuerpo con otra, y la página se lee como una acuarela que se quedó bajo la lluvia. Las muestras nunca estuvieron mal. Es que nunca fueron pensadas para ser texto.

Las herramientas de extracción y los listados de “50 paletas preciosas” están por todas partes. Casi ninguno cierra el círculo hacia colores que puedas publicar en un sitio web real sin fallar la accesibilidad. Aquí recorremos todo el flujo: saca los colores dominantes y luego convierte esas muestras en bruto en roles que aguanten.

TL;DR: Extrae los colores, pero no los uses tal cual. Ordénalos en roles (fondo, superficie, texto, acento) y luego oscurece o aclara las combinaciones que no lleguen al contraste WCAG. Los colores vivos van a titulares y acentos, no al texto del cuerpo.

Qué obtienes en realidad de una foto

Un extractor de paletas analiza una imagen e informa de los colores que ocupan más superficie, normalmente agrupados en cinco a diez muestras. Una foto de hojas de salvia sobre un plato crema podría devolver un verde salvia suave, un crema cálido, un oliva apagado, un casi blanco luminoso y un marrón de sombra.

Esos son los colores de la escena. Están sesgados hacia lo que llena el encuadre, que suelen ser tonos medios y pasteles suaves. Ese sesgo es justo lo que hace que el resultado se sienta tranquilo y coherente, y también la razón de que tan pocas muestras funcionen como texto. Las fotos rara vez contienen un oscuro real o un blanco papel nítido en cantidad, así que el extractor no tiene nada cercano al negro que ofrecerte para el cuerpo del texto.

Así que trata la extracción como el primer paso de dos. Tienes la materia prima. Ahora la haces usable.

La relación de contraste, en breve

La relación de contraste compara la luminancia relativa de dos colores: cuánta luz refleja cada uno, ponderada según cómo el ojo percibe realmente el rojo, el verde y el azul. El resultado es un número que va de 1:1 (idénticos) hasta 21:1 (negro puro sobre blanco puro).

WCAG, la guía de accesibilidad que la mayoría de los equipos toma como referencia, establece dos umbrales cotidianos para el nivel AA:

• 4.5:1 para el texto normal del cuerpo sobre su fondo
• 3:1 para el texto grande (más o menos 24px normal o 18.66px en negrita en adelante) y para partes de la interfaz como iconos, bordes de campos de formulario y anillos de foco

El punto clave para trabajar con paletas: el contraste depende de la distancia de luminancia, no de si dos colores “se ven distintos”. Un magenta intenso y un verde azulado profundo pueden chocar muchísimo a la vista y aun así fallar el contraste, porque están a una luminosidad parecida. Dos colores necesitan una separación real de luminancia para pasar.

Ordena las muestras en roles antes de juzgarlas

Un sitio web necesita cubrir un conjunto pequeño de funciones, no un montón de colores bonitos. Asigna tus muestras extraídas a cuatro roles:

• Fondo: la página detrás de todo, normalmente tu muestra más clara o más oscura
• Superficie: tarjetas, paneles y campos que se apoyan sobre el fondo, un medio paso por encima de él
• Texto: el color del cuerpo, que debe alcanzar 4.5:1 tanto sobre el fondo como sobre la superficie
• Acento: enlaces, botones, resaltados, donde un color vivo extraído se gana su lugar

La mayoría de las muestras extraídas son perfectas para fondo, superficie y acento. El rol de texto es donde las fotos te dejan tirado, porque el oscuro que necesitas para un cuerpo legible suele faltar en la imagen. Muchas veces lo tendrás que inventar tomando uno de los tonos de la foto y empujándolo mucho más oscuro.

Un ejemplo práctico

Supongamos que la foto de salvia sobre crema te da estos:

Muestra	Hex	Rol candidato
Crema	#F4EFE3	Fondo
Salvia medio	#9CAE8B	¿Acento o texto?
Blanco cálido	#FBF8F1	Superficie
Oliva	#6E7A57	Acento

La tentación es poner el texto del cuerpo en salvia medio sobre crema, porque la combinación se ve suave y acorde a la marca. Compruébalo:

• Salvia medio #9CAE8B sobre crema #F4EFE3 da alrededor de 1.7:1

Eso falla. Falla feo. No llega al texto normal (4.5:1), ni al texto grande (3:1), ni siquiera al mínimo de interfaz (3:1). Dos tonos medios, demasiado cercanos en luminancia. Como color de relleno o bloque decorativo está bien. Como texto es ilegible para muchas personas e invisible para algunas.

Ahora arréglalo sin tirar el tono a la basura. Conserva el verde y baja la luminosidad hasta que la combinación supere el listón:

• Salvia oscurecido #3C4A2E sobre crema #F4EFE3 da alrededor de 8.4:1

Eso pasa AA para el texto del cuerpo con margen de sobra, y sigue leyéndose como de la misma familia salvia. Mantuviste la sensación de marca y la hiciste legible. El salvia medio original tampoco se desperdicia. Ascendelo a un titular grande o al borde de una tarjeta, donde el listón de 3:1 es alcanzable:

• Salvia medio #9CAE8B sobre crema necesita 3:1 para texto grande y aun así no llega, con 1.7:1, así que se queda como decorativo
• Oliva #6E7A57 sobre crema da alrededor de 3.4:1, que supera el texto grande y la interfaz, pero no el cuerpo

El patrón es constante. Los colores vivos y los tonos medios se encargan de titulares, botones, bordes y rellenos. Un color oscurecido o casi negro lleva la lectura. Prueba siempre la combinación real que piensas publicar, el primer plano contra su fondo real, no contra un blanco supuesto.

Una rutina que puedes repetir

1. Extrae la paleta de tu imagen y anota los valores hex.
2. Elige la muestra más clara para el fondo y una casi gemela para la superficie.
3. Para el texto, toma un tono que te guste y oscurécelo hasta que llegue a 4.5:1 tanto sobre el fondo como sobre la superficie. Prueba la combinación, ajusta, vuelve a probar.
4. Asigna las muestras vivas que sobren a acentos y titulares grandes, comprobando cada combinación de acento contra 3:1.
5. Revisa en concreto las combinaciones que vas a renderizar de verdad: enlace sobre fondo, texto de botón sobre el relleno del botón, texto de marcador de posición sobre el campo.

Dos hábitos te ahorran la mayoría de los problemas. Primero, nunca dejes que un tono medio haga de texto del cuerpo; si una muestra está en mitad del rango de luminosidad, pertenece a los rellenos y acentos. Segundo, comprueba la combinación, no la muestra. Un color no es accesible ni inaccesible por sí solo; solo una combinación de primer plano y fondo tiene una relación.

Pronto llegarán herramientas gratuitas de paletas y contraste, directo en el navegador, a color.hivly.net, para que puedas extraer de una foto, mover una muestra más clara o más oscura y ver cómo se actualiza la relación contra un fondo real, todo en la página y sin subir nada. Hasta entonces, la rutina de arriba más cualquier verificador de contraste te dan una paleta con la que de verdad puedes construir.

Los colores de una foto son un ambiente. Una paleta web es un conjunto de funciones. El trabajo consiste en pasar de uno a otro sin perder ni el ambiente ni la legibilidad, y la mayor parte de ese trabajo es solo oscurecer una muestra lo suficiente.