Novedades en el convertidor de color: mezclador en pasos y puntuación APCA
El convertidor de color de ToolPico acaba de incorporar dos funciones que antes no estaban disponibles: un mezclador de colores con vista previa en varios pasos intermedios, y una puntuación de contraste APCA que ahora aparece junto al ratio WCAG 2.1 de siempre. Esta guía muestra dónde están, cómo usarlas y qué aportan frente a lo que ya conocías de la herramienta.
Respuesta cortaLa sección «Mezclador de colores» de la herramienta genera automáticamente entre 3 y 11 muestras intermedias entre un color inicial y uno final, cada una con su HEX visible y copiable con un clic.
Antes, para ver una transición entre dos colores había que apoyarse en el generador de degradados CSS y confiar en la vista previa visual del gradiente. La diferencia con el mezclador es que aquí cada paso se calcula y se muestra por separado, con su propio código de color, en lugar de solo una franja continua. Eso lo hace más útil cuando necesitas el valor exacto de un punto concreto de la transición — por ejemplo el paso al 40% — y no solo un efecto visual.
El uso es directo: eliges un color inicial y un color final (con el selector nativo o escribiendo el HEX), ajustas el número de pasos con el control deslizante (de 3 a 11, con 7 por defecto) y el mezclador dibuja esa cantidad de muestras de color en fila, desde el color inicial hasta el final. Al hacer clic sobre cualquier muestra copias su HEX. Un botón permite además intercambiar los dos colores para invertir la dirección de la mezcla.
Ejemplo de configuración
Color inicial
Color final
Pasos
Escala de marca a blanco
#7C3AED
#FFFFFF
7
Transición violeta → verde azulado
#7C3AED
#0D9488
5
Gradación fina para una escala de estado
#0D9488
#E11D48
11
Un caso práctico habitual: si estás construyendo una escala de un color de marca (por ejemplo del violeta al blanco, para fondos de tarjetas con distintos niveles de énfasis), fijar el color inicial y final y pedir 9 u 11 pasos te da de golpe una paleta ordenada de tonos intermedios, en lugar de ir probando valores de luminosidad uno por uno a mano.
RGB lineal o HSL: qué modo elegir
Respuesta cortaEl mezclador ofrece dos modos: RGB lineal, que interpola cada canal rojo/verde/azul por separado, y HSL, que interpola tono, saturación y luminosidad — normalmente con una transición de color más natural.
La diferencia se nota sobre todo cuando los dos colores de partida están en lados opuestos del círculo cromático. En modo RGB lineal, el punto intermedio de la mezcla puede caer en un tono apagado o grisáceo, porque promediar canal por canal no sigue el mismo camino que recorrer visualmente la rueda de color. En modo HSL, al interpolarse el tono como un ángulo, la transición tiende a pasar por colores más vivos en los pasos intermedios, en lugar de atravesar una zona neutra.
Dato práctico: si tu mezcla en modo RGB lineal se ve deslucida en el centro, cambia el selector a HSL y compara los mismos pasos — para pares de colores muy alejados en la rueda cromática suele ser la diferencia entre una transición «sucia» y una transición limpia.
No hay un modo universalmente «correcto»: para escalas de un mismo color de marca hacia blanco o negro, ambos modos suelen dar resultados muy similares. La utilidad de tener los dos disponibles es poder comparar en el momento, con tus propios colores, cuál produce el resultado que buscas para tu caso — un botón con estado hover, una ilustración con degradado, o una escala de severidad para una interfaz.
La puntuación APCA junto al ratio WCAG
Respuesta cortaEl comprobador de contraste ahora muestra, junto al ratio WCAG 2.1 de siempre, una puntuación de contraste APCA (Lc) para el mismo par de color de texto y color de fondo que introduzcas.
Hasta ahora, la sección de contraste de la herramienta solo devolvía el ratio WCAG 2.1 clásico (de 1:1 a 21:1) y si ese ratio superaba los umbrales AA/AAA. Eso sigue funcionando exactamente igual — sigue siendo el criterio de referencia para accesibilidad — pero ahora, en la misma pantalla, aparece además una puntuación APCA calculada para el mismo par de colores, sin que tengas que hacer nada distinto: sigues introduciendo un color de primer plano y uno de fondo, y ambos indicadores se actualizan juntos.
APCA usa una escala distinta a la del ratio WCAG: en lugar de ir de 1:1 a 21:1, se expresa como un valor Lc aproximadamente entre 0 y ±106, y el signo indica si el texto es más claro o más oscuro que el fondo. Es un modelo pensado para acercarse más a cómo se percibe realmente la legibilidad, considerando qué color hace de texto y cuál de fondo — algo que el ratio WCAG 2.1 no distingue, porque para él da igual invertir los dos colores.
Qué no cambia: tener la puntuación APCA visible no sustituye al ratio WCAG 2.1 como criterio obligatorio. Los umbrales AA (4,5:1 texto normal, 3:1 texto grande) y AAA (7:1 y 4,5:1) siguen siendo los que debes cumplir para accesibilidad; APCA se muestra como una señal complementaria, útil sobre todo para revisar casos límite en texto pequeño.
Un ejemplo hipotético para ilustrar la utilidad: imagina un texto gris medio sobre un fondo blanco que roza justo el 4,5:1 mínimo de WCAG AA. El ratio dice «aprueba», sin matices. La puntuación APCA, al ser sensible a qué color es texto y cuál fondo, puede mostrar un valor que sugiera que ese mismo par se sentiría distinto de legible si se invirtieran los roles (texto blanco sobre fondo gris) — una distinción que el ratio WCAG, por sí solo, no ofrece. Es exactamente el tipo de segunda opinión que tiene sentido mirar antes de dar por cerrada una combinación límite.
Prueba el mezclador y la puntuación APCA ahora
Mezcla dos colores en pasos, comprueba el ratio WCAG y la puntuación APCA — todo gratis, en tu navegador.
¿Dónde está el nuevo mezclador de colores en el convertidor?
Está en la sección «Mezclador de colores» de la herramienta, justo debajo del generador de paletas. Tiene dos selectores (color inicial y color final), un control deslizante para el número de pasos (de 3 a 11) y un menú para elegir el modo de mezcla, RGB lineal o HSL. Los pasos intermedios se muestran como muestras de color en las que puedes hacer clic para copiar el HEX de ese paso exacto.
¿Cuántos pasos intermedios puedo generar en el mezclador?
El control deslizante del mezclador permite elegir entre 3 y 11 pasos, con 7 como valor por defecto. Con 3 pasos solo ves el color inicial, el punto medio y el color final; con 11 pasos obtienes una gradación mucho más fina, útil para escalas de un componente de diseño o para revisar toda la curva de transición antes de fijar un color concreto.
¿Qué diferencia hay entre el modo RGB lineal y el modo HSL del mezclador?
En modo RGB lineal, cada canal rojo, verde y azul se interpola por separado entre los dos colores; es el método más directo, pero puede pasar por un tono apagado o grisáceo a mitad de camino si los colores de partida son muy distintos. En modo HSL, la interpolación se hace sobre el tono, la saturación y la luminosidad, lo que suele producir una transición de color más natural y viva, especialmente cuando los dos colores están en lados opuestos del círculo cromático.
¿Qué es la puntuación de contraste APCA que aparece junto al ratio WCAG?
Es un segundo indicador de contraste, mostrado en la misma sección que el ratio de contraste WCAG 2.1, con una escala Lc que va aproximadamente de 0 a ±106 en lugar del clásico 1:1 a 21:1. APCA es el modelo de contraste que se está estudiando para una futura versión de las pautas (WCAG 3) y es sensible a cuál de los dos colores es el texto y cuál el fondo, algo que el ratio WCAG 2.1 no distingue. Se calcula automáticamente para el mismo par de colores que introduces en el comprobador de contraste.
¿Debo sustituir el ratio WCAG 2.1 por la puntuación APCA en mis decisiones?
No. La puntuación APCA que ahora se muestra junto al ratio es informativa y complementaria; el ratio de contraste WCAG 2.1 y sus umbrales AA/AAA siguen siendo el criterio normativo vigente para accesibilidad. Tiene sentido usar el ratio WCAG como el requisito que debe cumplirse siempre, y mirar la puntuación APCA como una señal adicional para casos límite, sobre todo en texto pequeño o fino.
Nota: esta guía describe funciones verificadas directamente en el código actual de la herramienta a fecha de publicación. Los ejemplos de colores y escalas son ilustrativos para explicar el uso, no valores certificados ni una auditoría de accesibilidad formal. Para decisiones de diseño o cumplimiento normativo, verifica siempre con la herramienta y tus propios colores exactos.