Artículo
Extraer una paleta de colores accesible de una imagen
Una fotografía o un recurso de marca suele contener la semilla de un sistema de color completo. Extraer esa semilla, darle forma de paleta utilizable y verificarla frente a los estándares de accesibilidad requiere tres pasos diferenciados. Este artículo cubre cada uno en orden: cómo funciona la extracción de paletas internamente, cómo seleccionar y ajustar colores para un uso práctico, cómo comprobar el contraste frente a los umbrales WCAG y cómo detectar los pares que se fusionan para los usuarios con daltonismo.
Cómo se extrae una paleta: muestreo de píxeles y cuantización de color
Cada imagen digital es una cuadrícula de píxeles, cada uno con un valor de color en un espacio como RGB. Un extractor de paletas no inspecciona cada píxel individualmente: una foto de 2 megapíxeles contiene 2 millones de puntos de datos, lo que sería lento de procesar y devolvería miles de tonos ligeramente diferentes en lugar de un conjunto útil. En su lugar, la herramienta muestrea la cuadrícula de píxeles a intervalos regulares, recopilando un subconjunto representativo. Ese subconjunto se introduce en un algoritmo de cuantización de color. El enfoque más común agrupa colores similares mediante un método de agrupación, a veces llamado partición de corte mediano o k-means. El algoritmo coloca cada píxel muestreado en uno de un número fijo de grupos según la similitud de color, luego calcula el color promedio de cada grupo. El resultado es una lista pequeña, generalmente de 4 a 16 colores, que en conjunto representan los tonos visuales dominantes de la imagen. Los colores que aparecen solo en áreas aisladas pequeñas pueden no detectarse, lo cual es el comportamiento esperado y no un defecto.
De los colores dominantes brutos a una paleta utilizable
La salida bruta de un extractor de paletas es una lista de colores ordenados por frecuencia, pero la frecuencia por sí sola no forma una paleta. Una fotografía de un bosque devolverá varios verdes demasiado similares para usarlos en una interfaz como acentos diferenciados. El trabajo práctico consiste en seleccionar y ajustar. Empieza identificando un color como primario: el más distintivo y menos neutro. De los colores restantes, busca como máximo dos que contrasten con el primario y entre sí. Esos se convierten en tus acentos. Todo lo demás, incluidos los tonos desaturados que el extractor suele devolver de las sombras y los tonos medios, puede servir como neutros para fondos y bordes. Una vez que tengas esta estructura aproximada, casi con certeza necesitarás ajustar valores individuales. La herramienta color-converter te permite examinar cada color en hex, RGB y HSL. HSL es especialmente útil aquí: puedes mantener fijo el matiz y cambiar la luminosidad o la saturación para crear una familia más estrecha o más amplia sin salir de la misma familia de color.
Comprobar el contraste: umbrales WCAG para texto legible
Una vez que tengas colores candidatos para texto y fondo, debes comprobar si la combinación es legible. Las Web Content Accessibility Guidelines (WCAG) definen una razón de contraste para este fin. La razón compara la luminancia relativa de dos colores: un valor de 1:1 significa ningún contraste (mismo color sobre el mismo color) y 21:1 es el máximo (negro sobre blanco). WCAG 2.1 nivel AA exige una razón de al menos 4,5:1 para texto de cuerpo de tamaño normal y 3:1 para texto grande (18pt o 14pt negrita). El nivel AAA establece umbrales más altos de 7:1 y 4,5:1 respectivamente. No necesitas calcular la luminancia a mano. La clave es que un par de colores que te parece correcto bajo buena iluminación puede estar por debajo de 4,5:1 en pantalla, y la guía existe precisamente para ese caso. Tras extraer y ajustar los colores, comprueba cada par texto sobre fondo que planees usar. Un gris de tono medio que se lee bien sobre blanco puede fallar por completo sobre un beige claro de tu paleta extraída.
Daltonismo: simular cómo ven los pares los usuarios afectados
Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna forma de deficiencia en la visión del color. El tipo más común es la deuteranopia (sensibilidad reducida al verde), seguida de la protanopia (sensibilidad reducida al rojo). La tritanopia (sensibilidad reducida al azul-amarillo) es más rara. Para cada tipo, el sistema visual mapea ciertas longitudes de onda al mismo color percibido que los usuarios sin deficiencia ven como distintos. El problema práctico para una paleta es que dos colores que parecen claramente diferentes bajo visión normal pueden fusionarse en el mismo tono para un usuario con daltonismo, haciéndolos inútiles para transmitir distinción: por ejemplo, usar solo rojo y verde para señalar éxito y error. Ejecutar una simulación de daltonismo muestra cómo se ve la paleta cuando los canales afectados están comprimidos. Los pares que se fusionan en un gris o marrón casi idéntico son los que hay que reconsiderar: aumenta la diferencia de luminosidad entre ellos para que el contraste se mantenga incluso sin la distinción de matiz, o añade una señal secundaria (forma, etiqueta, patrón) para que el color no sea la única señal.
Hacerlo localmente: color-palette, color-blindness y color-converter
Los tres pasos descritos en este artículo pueden completarse sin enviar tu imagen ni tus colores de marca a ningún servidor. La herramienta color-palette se ejecuta completamente en el navegador: sueltas una imagen, muestrea los píxeles localmente y devuelve los colores dominantes como valores hex. No se transmite ningún archivo. La herramienta color-converter acepta un código hex y muestra el mismo color en RGB y HSL para que puedas hacer ajustes específicos de luminosidad o saturación manteniéndote en la misma familia de matiz. Tanto el hex como los valores convertidos existen solo en la página. La herramienta color-blindness funciona al revés: sueltas una imagen y renderiza simulaciones de deuteranopia, protanopia y tritanopia de esa imagen, calculadas en el navegador. Para comprobar una paleta en lugar de una foto, exporta o haz una captura de tus muestras de color como imagen primero, y luego suéltala en el simulador. Usando las tres herramientas en secuencia, extraer de la imagen, ajustar en color-converter y luego exportar una imagen de muestras y verificarla en color-blindness, cubres el flujo completo descrito anteriormente. Tu imagen permanece en tu dispositivo en todo momento, lo que importa si la foto de origen contiene marca no publicada o la identidad no lanzada de un cliente.
Herramientas en este artículo
- Extractor de paleta de coloresExtrae colores dominantes de una imagen como muestras HEX. Copia cualquier color. Sin subida.
- Simulador de daltonismoSimula protanopia, deuteranopia, tritanopia y acromatopsia en una imagen. Sin subida.
- Convertidor de coloresConvierte colores entre HEX, RGB, HSL, HSV y CMYK. Verificador de contraste WCAG incluido. Sin subida.
- Generador de esquemas de colorGenera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de un color base. Sin subida.
Preguntas frecuentes
¿Cuántos colores devuelve habitualmente un extractor de paletas?
La mayoría de las herramientas devuelven entre 5 y 16 colores por defecto, aunque muchas permiten configurar la cantidad. Devolver menos colores significa que el algoritmo debe agrupar más píxeles, lo que puede fusionar tonos distintos pero similares. Devolver más colores puede producir casi-duplicados difíciles de usar de forma diferenciada. Para una paleta de interfaz, 6 u 8 colores es normalmente un buen punto de partida.
¿Puede una paleta extraída de una imagen superar automáticamente el contraste WCAG?
No automáticamente. Los colores dominantes en una fotografía suelen ser tonos medios con luminancia moderada, que tienden a producir razones de 2:1 a 3:1 entre sí. Alcanzar el umbral de 4,5:1 para texto de cuerpo normalmente requiere aclarar los valores de fondo u oscurecer los valores de texto más allá de lo que proporciona la extracción bruta. La extracción te da un punto de partida; la comprobación de contraste te indica cuánto ajuste es necesario.
¿La razón de contraste WCAG tiene en cuenta el daltonismo?
En parte. La fórmula de luminancia WCAG se basa en el brillo relativo, no en el matiz, por lo que un par de alto contraste que supera 4,5:1 generalmente seguirá siendo distinguible incluso para usuarios con daltonismo, ya que se preserva la diferencia de luminosidad. Sin embargo, dos colores con luminancia similar pero matices diferentes, como el rojo y el verde al mismo brillo, pueden superar una comprobación de contraste basada en luminancia y seguir siendo indistinguibles para las personas con deuteranopia. Ejecutar una simulación de daltonismo es la forma correcta de comprobar la diferenciación a nivel de matiz por separado de la razón de contraste.