Cómo mezclar dos colores a mano y por qué el contraste no es solo un número WCAG
Elegir un color aislado es fácil; el problema aparece cuando necesitas una transición entre dos colores de marca, o cuando un ratio de contraste "aprobado" en el papel se ve raro en pantalla. Esta guía explica cómo se interpola una mezcla de colores paso a paso, y por qué el mundo del contraste de texto está evolucionando más allá del ratio simple de WCAG 2.1 — con el convertidor de color de ToolPico como referencia práctica.
Respuesta cortaMezclar dos colores en RGB es una interpolación lineal por canal: canal = A + (B − A) × t, donde t va de 0 (100% color A) a 1 (100% color B). Al 50%, cada canal R, G y B es simplemente el promedio de los dos colores.
Imagina un color de marca violeta #7C3AED y quieres crear una transición hacia un verde azulado #0D9488 para un fondo o una ilustración. Con la fórmula anterior aplicada a cada canal por separado, obtienes un punto intermedio exacto en cualquier porcentaje que elijas — no hace falta adivinar a ojo un tono "a medio camino".
Paso
t
Resultado aproximado (ejemplo)
Color A
0%
#7C3AED
Intermedio
50%
≈ #457865 (ilustrativo)
Color B
100%
#0D9488
El convertidor de color de ToolPico ya deja convertir cada extremo de tu mezcla entre HEX, RGB, HSL y espacios modernos como OKLCH o LAB, y generar un degradado CSS entre dos paradas de color con vista previa en directo — que es, en esencia, una mezcla continua renderizada por el navegador en lugar de calculada a mano punto por punto.
Por qué conviene ver la mezcla en varios pasos
Respuesta cortaMirar solo el 50% no revela cómo se comporta toda la transición: a veces el punto medio cae en un tono apagado o grisáceo incluso si ambos extremos son vivos, algo que solo se detecta viendo varios pasos intermedios.
Esto ocurre sobre todo al mezclar colores muy opuestos en el círculo cromático (por ejemplo un naranja vivo y un azul saturado): el promedio matemático en RGB puede caer cerca de un gris o un marrón apagado a mitad de camino, aunque los dos extremos sean llamativos. Calcular pasos como 10%, 25%, 50%, 75% y 90% permite ver la "forma" completa de la curva antes de decidir qué punto usar en un botón con estado hover, una insignia degradada o una ilustración vectorial.
Dato práctico: si una mezcla de dos colores de marca se ve apagada en el punto medio, prueba a interpolar en HSL en lugar de en RGB — mantener el Tono como una transición angular directa suele dar resultados más vivos que promediar los tres canales RGB por separado.
Nota: el convertidor de color de ToolPico no incluye todavía un mezclador dedicado con vista previa de pasos intermedios — hoy permite convertir cada color por separado y generar degradados CSS de dos o más paradas, lo cual cubre el caso de uso de una transición visual continua. Una herramienta de mezcla con pasos numerados explícitos (por ejemplo mostrando el HEX exacto en cada 10%) es una función que podría añadirse en el futuro para quienes necesiten el valor exacto de un paso concreto, no solo el degradado visual.
WCAG 2.1 frente al método APCA
Respuesta cortaWCAG 2.1 calcula un único ratio de contraste (de 1:1 a 21:1) igual para cualquier tamaño de texto; APCA es un método más nuevo que ajusta su puntuación según el tamaño y grosor del texto, pensado para reflejar mejor cómo se percibe realmente la legibilidad.
El comprobador de contraste de esta herramienta calcula hoy el ratio WCAG 2.1 estándar y los umbrales AA/AAA — el criterio de referencia usado en la mayoría de auditorías de accesibilidad web. APCA parte de una idea distinta: en lugar de un solo número universal, calcula una puntuación (llamada Lc) que tiene en cuenta que un texto pequeño y fino necesita más contraste que un titular grande y en negrita para sentirse igual de legible. Esto puede explicar casos donde dos combinaciones de color con el mismo ratio WCAG "se sienten" distintas al mirarlas en pantalla.
Estado actual: APCA todavía se está desarrollando como parte de una posible futura versión de las pautas de accesibilidad y no sustituye legalmente al ratio WCAG 2.1 hoy. Tratarlo como una segunda opinión complementaria —no como reemplazo— es razonable mientras el estándar madura.
Para quienes ya usan el comprobador de contraste WCAG de ToolPico, tener en el futuro una puntuación APCA junto al ratio existente serviría como una segunda señal: por ejemplo, un texto gris claro sobre blanco que raspa el 4,5:1 mínimo de WCAG podría mostrar una puntuación APCA que sugiera reforzar el contraste en tamaños de fuente pequeños, incluso si técnicamente ya "aprueba" el umbral clásico. Hasta que eso llegue, la recomendación práctica es simple: cumple siempre el ratio WCAG como mínimo obligatorio, y además revisa la vista previa en directo del texto real antes de dar por buena cualquier combinación límite.
Prueba tus combinaciones de color ahora
Convierte HEX, RGB, HSL y OKLCH, genera degradados CSS y comprueba el contraste WCAG — todo gratis, en tu navegador.
La forma más simple es interpolar linealmente cada canal RGB entre los dos colores según un porcentaje t: canal_mezcla = canal_A + (canal_B - canal_A) × t. Por ejemplo, mezclar #7C3AED (violeta) con #0D9488 (verde azulado) al 50% da un tono intermedio en cada canal R, G y B. Cuantos más pasos intermedios calcules (25%, 50%, 75%), más suave se ve la transición.
¿Qué es el contraste APCA y en qué se diferencia de WCAG 2.1?
APCA (Accessible Perceptual Contrast Algorithm) es un método de contraste más reciente que, a diferencia del ratio simple de WCAG 2.1, tiene en cuenta el tamaño y grosor del texto y modela mejor cómo percibe el ojo humano el contraste en pantallas modernas. WCAG 2.1 usa un único ratio (por ejemplo 4,5:1) válido para cualquier tamaño de fuente; APCA da una puntuación (Lc) pensada para ajustarse según si el texto es pequeño, grande o en negrita, por lo que dos combinaciones con el mismo ratio WCAG pueden tener puntuaciones APCA distintas.
¿Debo usar WCAG 2.1 o APCA para comprobar mi diseño?
Hoy, WCAG 2.1 (ratio y umbrales AA/AAA) sigue siendo el estándar legal y de referencia para la mayoría de auditorías de accesibilidad, y es el que calcula esta herramienta. APCA todavía está en desarrollo como parte de una futura revisión de las pautas y aún no tiene umbrales oficiales adoptados, pero ya se usa como referencia complementaria en algunos equipos de diseño para detectar combinaciones que aprueban WCAG por poco margen pero se perciben poco legibles, o al revés.
¿Por qué mezclar dos colores en pasos y no solo el 50%?
Ver únicamente el punto medio no muestra cómo se comporta la transición; a veces el 50% cae en una zona apagada o grisácea incluso si los extremos son colores vivos. Calcular varios pasos intermedios (por ejemplo cada 10% o 25%) permite ver la curva completa antes de decidir un color final para un botón, una ilustración o un fondo degradado, igual que se hace al ajustar manualmente un degradado CSS.
¿Un ratio de contraste WCAG alto garantiza que el texto se lea bien?
No siempre en todos los casos límite. El ratio WCAG solo depende de la luminancia de los dos colores, no del tamaño ni del grosor del texto en un caso concreto, así que dos pares con el mismo ratio pueden sentirse distintos si uno es un texto muy fino y pequeño. Por eso conviene usar el ratio WCAG como base obligatoria y, además, mirar siempre una vista previa real del texto — no solo el número — antes de dar por buena una combinación.
Nota: esta guía usa fórmulas estándar de interpolación de color y explica APCA como un método de contraste emergente con fines informativos; no sustituye una auditoría de accesibilidad formal. Los ejemplos numéricos de mezcla e ilustraciones de pasos son aproximados y sirven para explicar el concepto, no valores certificados. Para decisiones de diseño o cumplimiento normativo, verifica siempre con la herramienta y tus propios colores exactos.