Actualizado 10 de julio de 2026

Qué es una JND: cuándo dos colores se ven iguales

Aquí tienes un experimento de cinco segundos. Dos grises: #808080 y #828282. Colócalos uno junto al otro, con los bordes tocándose, y decide cuál es más claro. En luminosidad OKLCH se sitúan en ≈0,600 y ≈0,607: una diferencia que la mayoría de los espectadores no logra encontrar ni siquiera en el borde compartido. Ahora sustituye la segunda muestra por #868686, en ≈0,620: para la mayoría de la gente aparece una tenue costura donde se encuentran las muestras. Sepáralas y, para muchos espectadores, incluso esa diferencia se disuelve.

La línea que cruza el experimento tiene nombre: la diferencia apenas perceptible (JND, del inglés just-noticeable difference): el cambio más pequeño en un estímulo que un observador puede detectar de forma fiable. Cualquier cosa más pequeña no es una diferencia más sutil; perceptualmente no es diferencia alguna. Para las escalas de color la consecuencia es contundente: dos pasos más próximos que una JND son un solo color con dos nombres. En luminosidad OKLCH, una diferencia de alrededor de 0,02 L es un umbral práctico para el trabajo de UI.

De dónde viene ese umbral, cómo las paletas acaban infringiéndolo y qué cuesta cuando lo hacen: de eso trata este artículo. El modelo de color en el que se mide el umbral tiene su propia serie en nuestra guía de OKLCH.

¿De dónde viene la idea de una JND?

De la psicofísica, la tradición de investigación que mide cómo el cambio físico se traduce en cambio experimentado. La diferencia apenas perceptible se estudia desde el siglo XIX, empezando por los experimentos de Ernst Weber con pesos que se levantaban: ¿cuánto más pesado debe volverse un peso antes de que una persona lo note? El hallazgo recurrente es que la detección tiende a escalar con la proporción —una pequeña adición resulta obvia frente a una carga ligera e invisible frente a una pesada— y el mismo patrón se cumple en el brillo, la sonoridad y, con más dimensiones en juego, el color.

Dos propiedades del concepto importan para el trabajo de diseño. Primera, una JND es una magnitud estadística: «detectar de forma fiable» significa detectada en una proporción acordada de intentos, no un interruptor que se acciona. Segunda, varía con las condiciones: los parches adyacentes revelan diferencias más pequeñas que los separados, las áreas grandes más que las líneas finas, los entornos tranquilos más que los recargados. Cualquier número concreto es, por tanto, una regla práctica de ingeniería calibrada para una visualización típica, no una constante de la naturaleza. En la ciencia del color, la medida de diferencia de propósito general es delta E, y una JND corresponde a aproximadamente ΔE 1–2: un orden de magnitud, no una constante precisa. La cifra de 0,02 para la luminosidad OKLCH es la misma idea proyectada sobre el único eje a lo largo del cual se construyen la mayoría de las paletas.

¿Cuán cerca es demasiado cerca entre los pasos de una paleta?

Haz los cálculos con una rampa de UI de rango completo. Una escala que va de casi blanco a casi negro podría abarcar de una luminosidad de 0,97 hasta 0,25: un presupuesto de 0,72 para repartir. Los pasos se sitúan en los extremos de los huecos, así que n pasos crean n − 1 huecos:

PasosHuecosL por huecoLectura
1090,080cómodo: cuatro veces el umbral
25240,030acercándose a la línea
4039≈0,018por debajo: los pasos adyacentes se fusionan

Y eso suponiendo un espaciado perfectamente uniforme. Muchas rampas reales suavizan sus curvas cerca de los extremos, así que el par más ajustado es más ajustado que la media: los problemas llegan antes de que el hueco medio alcance 0,02.

Scale Composer lo comprueba par a par: se dispara una advertencia de JND siempre que dos pasos adyacentes queden a menos de 0,02 L el uno del otro. Abre una rampa construida para hacerla saltar: decenas de pasos sobre una curva de luminosidad poco pronunciada. Los pares marcados son precisamente los vecinos que no serás capaz de distinguir.

Una rampa de color en Scale Composer con muchos pasos sobre una curva de luminosidad poco pronunciada, con la advertencia de JND marcando los pares adyacentes más próximos que 0,02 de luminosidad

¿De dónde salen los pasos casi-JND?

Dos causas explican la mayoría de los casos:

  • Demasiados pasos para el intervalo de luminosidad. La rampa de 40 pasos de arriba es la versión obvia. La versión sutil es un intervalo estrecho: una pila de superficies en modo oscuro confinada entre L 0,45 y 0,25 solo tiene 0,20 para gastar, así que doce pasos crean once huecos de ≈0,018 cada uno: por debajo del umbral, aun cuando doce pasos a lo largo de todo el rango serían generosos.
  • Rampas aplanadas contra el techo de la gama. Una pantalla solo puede mostrar una cantidad limitada de croma en cada luminosidad; los pasos empujados más allá de ese límite se recortan al color visible más cercano, y el recorte borra la distancia: dos pasos distintos en el modelo pueden acabar casi uno encima del otro en pantalla. Esta es una de las razones por las que los generadores limitan el croma ligeramente por debajo del techo: ese margen preserva las diferencias que prometía la curva de luminosidad.

¿Por qué importan los pasos fusionados más allá de la estética?

Una paleta es, funcionalmente, un alfabeto de señales: cada paso vale exactamente la diferencia visible entre él y sus vecinos. Un paso por debajo de la JND añade un nombre al vocabulario pero ninguna señal: coste sin información. De ahí se derivan directamente dos fallos:

  • Elecciones falsas. Un conjunto de tokens que ofrece gray-200 y gray-250 que nadie puede distinguir obliga a tomar decisiones sin consecuencia visible. El equipo debate cuál es el correcto, la interfaz se ve idéntica en cualquier caso, y la inconsistencia permanece invisible hasta que una auditoría cuenta tokens en lugar de mirar las pantallas.
  • Señalización de estados rota. Si los fondos de reposo y de hover de una tarjeta están a 0,015 L de distancia, el producto tiene un estado de interacción que los usuarios no pueden percibir. La respuesta funciona en la revisión de diseño, donde alguien alterna los dos estados de un lado a otro, y falla en el uso, donde nadie lo hace. Deshabilitado frente a habilitado, seleccionado frente a no seleccionado: cualquier par de estados asignado a un paso por debajo del umbral hereda el mismo silencio.

¿Qué haces cuando salta la advertencia?

Las dos reparaciones honestas son sustractivas: menos pasos a lo largo del mismo intervalo, o un intervalo más ancho con los mismos pasos. Lo que no ayuda es separar a mano el par marcado —eso solo traslada el amontonamiento al par siguiente— y lo que no debe tocarse es el umbral mismo, porque el límite vive en los observadores, no en el software. Abre la versión reparada de la misma rampa: el mismo intervalo de luminosidad con un número de pasos que puede soportar: cada hueco adyacente vuelve a quedar por encima de 0,02, y dos vecinos cualesquiera son de nuevo dos colores que puedes distinguir.

Seguir leyendo

  • ¿Qué es OKLCH? Una explicación para diseñadores

    OKLCH describe el color con tres valores que coinciden con la percepción humana: luminosidad, croma, tono. Descubre por qué reemplazó a HSL para paletas, rampas y contraste.

  • ¿Qué es la uniformidad perceptual?

    La uniformidad perceptual significa que distancias numéricas iguales se ven como diferencias visibles iguales. Por qué RGB y HSL no pasan la prueba, y qué aporta la uniformidad al trabajo de diseño.