Cómo generar una paleta de colores con contraste suficiente para texto

Una paleta generada casi siempre se ve bien como fila de muestras. El problema empieza cuando pones un título en uno de los colores, lo colocas sobre otro y descubres que el par que te gustaba casi no tiene contraste. Esta guía explica cómo usar el generador de paletas para que el conjunto que conserves tenga un color en el que puedas poner texto, sobre el fondo que de verdad vas a publicar.

Todos los colores pasan sobre blanco o sobre negro

Empieza por el dato que cambia el planteamiento. La relación de contraste de un color contra blanco, multiplicada por su relación contra negro, siempre da 21. La fórmula de WCAG da 1.05 ÷ (L + 0.05) contra blanco y (L + 0.05) ÷ 0.05 contra negro, donde L es la luminancia relativa del color, y los términos en L se cancelan: 1.05 ÷ 0.05 = 21. Así que el peor caso para la mejor de las dos relaciones de un color es √21, alrededor de 4.58, y cualquier color que exista supera 4.5:1 contra uno de los dos.

Un color de texto, entonces, no es una propiedad de un color por sí solo. Es un color que supera 4.5:1 contra el fondo concreto sobre el que va a ir. “¿Puede llevar texto?” no tiene respuesta hasta que dices sobre qué.

Por eso la auditoría de la herramienta no pregunta por el blanco y el negro. Antes lo hacía: su conteo de colores que podían “llevar texto sobre blanco o negro” daba por utilizables todos los colores de todas las paletas generadas, y su botón de corrección nunca podía aparecer. Lo notamos al escribir esta guía. Ahora pregunta para qué sirve realmente una paleta: ¿puede este color llevar texto sobre otro color del mismo conjunto?

Cómo generar la paleta, paso a paso

1. Pon el color que tienes que conservar. El código hexadecimal de cada columna es un campo editable: haz clic en él y escribe o pega un valor. Luego presiona el candado de la esquina superior derecha de esa columna para fijarlo.
2. Presiona la barra espaciadora o Generate (generar). Todas las columnas sin candado se vuelven a generar y las fijadas se quedan. Si pierdes un conjunto que querías, Undo (deshacer, o la tecla Z) retrocede un paso, y solo uno.
3. Define el número de columnas. Add (añadir) y Remove (quitar) llevan la paleta a cualquier cantidad entre dos y ocho colores.
4. Lee el pie de cada columna. Indica la mejor pareja de esa columna dentro de la paleta, con la relación de contraste entre ambas. “Carries text in this palette” (lleva texto en esta paleta) significa que una pareja llega a 4.5:1; si no, un enlace fix → (corregir) ofrece el color más cercano con el mismo tono que lo lograría, medido contra el color más oscuro o más claro de la propia paleta. El botón Audit (auditar) muestra y oculta estas líneas; están activadas cuando se abre la página.
5. Fija lo que vas a conservar y vuelve a generar el resto. Lock all (fijar todo, la tecla L) fija todas las columnas a la vez; si lo presionas de nuevo, las libera todas.
6. Guárdala. Share (compartir) copia un enlace que vuelve a abrir exactamente esta paleta, Save here (guardar aquí) la conserva en tu actividad reciente en este dispositivo y Export (exportar) la copia como CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens de Figma o muestras SVG.

Cómo coloca una nueva generación los colores libres

Fijar una columna hace más que dejarla en paz. El color fijado que está más a la izquierda se convierte en el ancla, y su tono y su croma deciden dónde va todo lo demás. Las columnas libres recorren el tono desde 60° por debajo del tono del ancla hasta 60° por encima, y cada una se desplaza al azar hasta 12° en cualquier dirección. Su croma se fija entre el 45% y el 125% del croma del ancla, y se considera que el ancla tiene al menos 0.06.

La luminosidad avanza de izquierda a derecha por las columnas libres: empieza en una luminosidad OKLCH de 0.22 y sube en pasos iguales que se reparten 0.62 entre ellos. Con una columna fijada y cuatro libres, las libres apuntan a 0.22, 0.375, 0.53 y 0.685, y cada una se mueve hasta 0.04.

De esa aritmética salen dos consecuencias prácticas.

• La columna libre de más a la izquierda siempre es la más oscura. Apunta a 0.22, lo que la convierte en el color de texto más probable sobre una página clara.
• Una nueva generación nunca produce un color claro de superficie. Incluso con ocho columnas y una fijada, la columna libre más clara apunta a 0.22 + 0.62 × 6/7, alrededor de 0.75. Si quieres un color casi blanco para la página o las tarjetas, escríbelo en una columna y fíjalo. La paleta con la que abre la herramienta hace justo eso: su quinto color, #f4f1ea, está escrito a mano, no generado.

La paleta inicial, contra sí misma

La herramienta abre con #0f172a, #1e5aa8, #3ba0c9, #e8b04b y #f4f1ea. La columna sobre blanco está solo como comparación; la herramienta ya no la muestra. La columna de la pareja es lo que dice el pie de cada columna, truncado a dos decimales como lo hace la herramienta.

Color	Sobre blanco (como comparación)	Mejor pareja en la paleta
#0f172a	17.85:1	#f4f1ea, 15.82:1
#1e5aa8	6.81:1	#f4f1ea, 6.03:1
#3ba0c9	2.97:1	#0f172a, 5.99:1
#e8b04b	1.95:1	#0f172a, 9.13:1
#f4f1ea	1.12:1	#0f172a, 15.82:1

Aquí la franja marca 5 of 5, y esta vez es cierto: cada color tiene una pareja sobre la que puede llevar texto, porque el conjunto inicial se armó con un extremo oscuro y uno claro. Solo sobre blanco, apenas dos de los cinco pasarían.

Una paleta popular de tonos medios muestra cómo se ve un fallo. #264653, #2a9d8f, #e9c46a, #f4a261 y #e76f51, el conjunto de verde azulado, arena y coral, obtiene 3 of 5. La mejor pareja del verde azulado medio es el verde azulado oscuro, a 3.03:1, y su corrección es #53bfb0, que llega a 4.53:1 contra #264653 con el tono fijo en 183°. El coral no pasa de 3.25:1. Ninguno de los dos colores está mal; simplemente el conjunto no tiene nada lo bastante claro con qué emparejarlos.

El ámbar es el caso que más enseña. Con 1.95:1 no sirve como texto sobre blanco, pero el ámbar sobre el azul marino mide 9.13:1. Que un color sea o no un color de texto depende por completo de lo que tenga detrás.

La comprobación que sí hace la franja

La segunda frase de la franja es una prueba a nivel de paleta que un verificador de contraste nunca hace, porque compara un primer plano con otro. Simula cada par de colores bajo ocho tipos de deficiencia de la visión del color, con el modelo de Machado, Oliveira y Fernandes (2009), y señala cualquier par cuya distancia CIEDE2000 baje de 11 en alguno de ellos. Dos colores pueden superar cada uno 4.5:1 contra la página y aun así ser difíciles de distinguir para alguien con deuteranomalía, que según las notas de la herramienta afecta a alrededor del 5% de los hombres.

Si la franja señala un par, el simulador de daltonismo lo muestra con cada tipo de visión, y cómo crear una paleta apta para daltónicos explica la solución.

Otras formas de hacerlo

No hay ningún método integrado en macOS, Windows o iPhone para generar una paleta y auditarla, ni una vía por línea de comandos entre las que estas guías respaldan. La alternativa manual es cualquier generador seguido de un verificador de contraste, un par a la vez, para cada par en el que pienses poner texto.

	Esta herramienta	Un generador típico de barra espaciadora
Fijar colores	El tono fijado ancla dónde van los demás	La posición fijada se salta, el resto es aleatorio
Contraste por color	Su mejor pareja en la paleta, con la relación	Ninguno, o solo contra blanco
Comprobación a nivel de paleta	Se señalan los pares que se confunden en la simulación de visión del color	No se ofrece
Guardar	Colores incluidos en el enlace	Una cuenta

Cómo comprobar que nada sale de la pestaña

Aquí no hay ningún archivo que subir, y la paleta vive en la barra de direcciones después del signo #. Los navegadores no envían esa parte de una URL al servidor, así que un enlace compartido se abre sin que los colores lleguen nunca al sitio. Para confirmarlo, abre DevTools, ve al panel Network y presiona la barra espaciadora unas cuantas veces: nada de lo que sale lleva tus colores.

Abre el generador de paletas, fija el color que no puedes cambiar y lee la pareja de cada columna antes de quedarte con un conjunto. Para los umbrales en sí, qué relación de contraste necesitas de verdad explica qué número aplica en cada caso.