Colores complementarios, triádicos y análogos: cómo hacer legible cada armonía

Las armonías de color son reglas prácticas de larga tradición, y responden una pregunta más limitada de la que la gente les hace. Dicen qué tonos combinan entre sí. No dicen nada sobre si uno de esos tonos se puede leer sobre otro, y la razón está en la propia aritmética del contraste.

Las tres armonías, definidas

Los colores complementarios son dos tonos en lados opuestos de la rueda de tonos, a 180° de distancia.

Los colores triádicos son tres tonos repartidos de manera uniforme en la rueda, a 120° unos de otros.

Los colores análogos son un tono base y sus vecinos; la herramienta de armonías de color usa los tonos a 30° a cada lado.

Estas reglas son convenciones de larga tradición, no resultados de una medición. Su valor está en que reducen un espacio infinito de opciones a un puñado que puedes justificar. La herramienta ofrece seis, y la nota que muestra debajo de cada una vale la pena leerla como una etiqueta de advertencia.

Armonía	Desplazamientos de tono respecto al base	Colores	Qué los separa	La nota de la herramienta
Análoga	0°, −30°, +30°	3	Tono	Tonos vecinos. Tranquila, y la opción por defecto más segura para interfaces.
Complementaria	0°, 180°	2	Tono	Tonos opuestos. Separación máxima, lo que también la hace la más fácil de usar en exceso.
Triádica	0°, 120°, 240°	3	Tono	Tres tonos repartidos de manera uniforme. Vivaz, y difícil de equilibrar sin que uno domine.
Complementaria dividida	0°, 150°, 210°	3	Tono	El tono opuesto, dividido en dos. Casi todo el contraste, con menos tensión.
Tetrádica	0°, 90°, 180°, 270°	4	Tono	Dos pares complementarios. Rica, y por lo general un par de más para una interfaz.
Monocromática	Ninguno; luminosidad 0.32, 0.52 y 0.72	3	Luminosidad	Un tono con distintas luminosidades. Resiste todos los tipos de daltonismo.

La “separación máxima” de la nota de la complementaria es separación de tono. Como muestra la siguiente sección, no es separación de contraste.

Por qué una armonía no puede prometer contraste

El ratio de contraste de WCAG se calcula a partir de la luminancia relativa y nada más. La luminancia es una suma ponderada de los canales rojo, verde y azul linealizados, 0.2126 R + 0.7152 G + 0.0722 B, y en el ratio no hay ningún término para el tono. Dos colores de cualquier tono con la misma luminancia dan 1:1.

La herramienta de armonías lo hace concreto. Cada color rotado se construye con la misma luminosidad y el mismo croma OKLCH que el color base, girando solo el tono. Cuando un tono girado no puede mantener ese croma en pantalla, se reduce el croma y la luminosidad se deja igual. Así que cada miembro de un conjunto complementario, triádico, análogo, complementario dividido o tetrádico tiene la misma luminosidad OKLCH que el base.

En los colores neutros, la misma luminosidad OKLCH significa exactamente la misma luminancia, así que el ratio sería exactamente 1:1. Los tonos reales con una misma luminosidad difieren un poco en luminancia, así que espera ratios entre miembros cercanos a 1:1, muy lejos del 3:1 que necesita incluso el texto grande. Un par complementario puede verse llamativo y aun así ser ilegible cuando pones uno como texto sobre el otro.

La monocromática es la excepción porque varía la luminosidad. Sus tres colores se construyen con luminosidad OKLCH 0.32, 0.52 y 0.72 en el tono del base, sea cual sea la luminosidad del propio base, así que el color que escribiste no está entre ellos a menos que su luminosidad coincida con una. En una versión neutra, donde la luminancia relativa es el cubo de la luminosidad OKLCH, la aritmética queda así:

• el más oscuro sobre el más claro: (0.72³ + 0.05) ÷ (0.32³ + 0.05) ≈ 5.1:1
• el intermedio sobre el más claro: (0.72³ + 0.05) ÷ (0.52³ + 0.05) ≈ 2.2:1
• el más oscuro sobre el intermedio: (0.52³ + 0.05) ÷ (0.32³ + 0.05) ≈ 2.3:1

Solo el más oscuro sobre el más claro sirve como par para texto de cuerpo, y no por mucho margen. La herramienta muestra el ratio de cada color sobre blanco y sobre negro, pero no entre miembros; para comparar dos muestras entre sí, divide la cifra mayor sobre blanco entre la menor. El 1.05 de la fórmula se cancela, lo que hace que el resultado sea exacto antes de redondear.

Cómo crear una armonía y leer su auditoría

1. Define el color base. Usa la muestra o escribe en el campo hex que está al lado; acepta hex, rgb(), hsl() u oklch(). La herramienta abre con #2563eb.
2. Elige una armonía. Hay seis botones bajo “Harmony” (armonía), con la nota de la armonía actual debajo. La tecla H pasa a la siguiente armonía con el mismo base, y Random base (base aleatorio), o la tecla R, mantiene la armonía y elige un nuevo base.
3. Lee cada muestra. Debajo de su código hex hay dos líneas, “on white” (sobre blanco) y “on black” (sobre negro), cada una con un ratio y un veredicto: AA, large only (solo texto grande) o fails (no aprueba). Como los dos ratios de un color siempre multiplican 21, toda muestra aprueba AA sobre uno de los dos fondos. Lo que importa es sobre cuál va a ir tu texto.
4. Lee el panel de auditoría. Su encabezado dice “Every pair survives colour blindness” (todos los pares resisten el daltonismo) o indica cuántos pares se confunden. Cada par que se confunde aparece con los tipos de visión en los que falla. La prueba simula ocho tipos de deficiencia de la visión del color y marca cualquier par cuya distancia CIEDE2000 cae por debajo de 11.
5. Copia el CSS. El panel de abajo escribe el conjunto como --palette-1, --palette-2 y así sucesivamente, y Copy lo pone en el portapapeles. Share copia un enlace al mismo conjunto, y Save here lo guarda en este dispositivo.

Cómo hacer legible cada armonía

La jugada común para todas: deja la armonía para rellenos, acentos y series de gráficas, y saca el texto de un cambio de luminosidad en uno de sus tonos.

Complementaria

Dos colores con la misma luminosidad. Ninguno sirve como texto sobre el otro, así que deja que uno ocupe la mayor parte del área y usa el otro con moderación. Para el texto, usa un paso oscuro de cualquiera de los dos tonos; el generador de escalas y tokens construye once pasos de un tono e indica cuál supera 4.5:1 sobre blanco.

Triádica y complementaria dividida

Tres tonos con la misma luminosidad, todos compitiendo con el mismo peso visual. Elige uno para que domine, como aconseja la nota de la herramienta, y saca el texto de un neutro o de un paso oscuro, no del conjunto. Estos son además los conjuntos en los que el tono hace toda la separación, así que lee la auditoría antes de usarlos para distinguir algo, como las series de una gráfica.

Análoga

Vecinos a 30° de distancia con la misma luminosidad dependen por completo del tono para distinguirse. Eso los hace tranquilos como fondos y acentos, y significa que la auditoría de visión del color es la comprobación en la que debes confiar si dos de ellos tienen que significar cosas distintas. Separa esos dos por luminosidad o agrega una segunda señal: las notas de la herramienta remiten a WCAG 1.4.1, que pide que el color nunca sea el único portador de significado.

Monocromática

Ya está separada por luminosidad, y por eso la nota de la herramienta dice que resiste todos los tipos de daltonismo. Es la única armonía que contiene su propio par para texto: el miembro más oscuro sobre el más claro, a unos 5:1 según la aritmética neutra de arriba.

Otras formas de hacerlo

No hay un método integrado en macOS, Windows ni iPhone para crear armonías de color, ni una vía por línea de comandos entre las que estas guías respaldan. En papel, una rueda de tonos te da los ángulos; luego el verificador de contraste te dice cuáles de los resultados pueden llevar texto, y la versión más cercana de cada uno que sí puede.

Cómo comprobar que no se envía nada

No se sube nada, porque no hay nada que subir: el color base y la armonía se guardan después del # en la barra de direcciones, y los navegadores no envían esa parte de una URL al servidor. Observa el panel Network en DevTools mientras cambias de armonía y verás que nada los transporta.

Abre armonías de color, prueba tu base como tríada y luego como conjunto monocromático, y compara lo que dice la auditoría. Para crear desde el principio un conjunto que resista las deficiencias de la visión del color, consulta Cómo crear una paleta de colores apta para daltónicos.