Por qué los colores se ven más apagados en oscuro (y el ajuste del 20 %)

Aquí tienes un experimento de treinta segundos. Toma un azul de marca — #2563eb, que es oklch(0.546 0.215 262.9) — y coloca dos muestras de él una al lado de la otra: una sobre una tarjeta blanca, otra sobre una tarjeta casi negra. El mismo hex, los mismos píxeles, el mismo monitor. La muestra sobre la tarjeta oscura se ve más apagada — un poco menos colorida, un poco cansada — aunque un selector de color jurará que las dos son idénticas. Nada del color cambió. Solo cambiaron sus alrededores.

Los colores se ven lavados en modo oscuro porque el sistema visual juzga la coloridez en relación con los alrededores, no en términos absolutos: contra un fondo oscuro, el valor de croma idéntico se lee notablemente menos vívido. El ajuste consiste en subir el croma, no la luminosidad — las paletas oscuras derivadas aumentan el croma en aproximadamente un 20 % para que los colores sobre casi negro se lean tan vívidos como sus equivalentes de modo claro se veían sobre blanco. Este es el mecanismo perceptual que subyace a buena parte de lo que cubre nuestra guía de modo oscuro; este artículo recorre por qué ocurre, por qué los equipos habitualmente corrigen el eje equivocado, y qué aspecto tienen los números.

¿Por qué el mismo color se ve menos colorido sobre un fondo oscuro?

Porque el ojo es un instrumento relativo, no un colorímetro. Dos efectos de la investigación en percepción bastan para explicar el experimento anterior, y ambos vale la pena conocerlos en forma accesible.

El primero es el contraste simultáneo — el hallazgo general de que un estímulo se percibe en relación con lo que lo rodea, la misma familia de efectos que el efecto de contraste en la percepción en general. Un parche de color bordeado por blanco brillante se compara, continuamente, contra algo que no tiene color y tiene luz máxima; el mismo parche bordeado por casi negro se compara contra algo que no tiene color y casi nada de luz. La comparación cambia lo que se percibe, y una de las víctimas es la coloridez: contra el entorno oscuro, el color del parche se lee como menos saturado de lo que mide.

El segundo es la adaptación. En una interfaz oscura el ojo se ajusta a un nivel general de luz más bajo, y parte de cómo funciona la apariencia del color es que la coloridez percibida tiende a caer a medida que cae el nivel de luz — una escena al anochecer se ve más gris que la misma escena al mediodía, aunque las superficies en ella no hayan cambiado. Un tema oscuro es un pequeño anochecer autoinfligido.

Ninguno de los dos efectos es un artefacto de la pantalla, y ninguno puede apagarse. Un tema oscuro que quiere que sus colores se lean igual que el tema claro tiene que compensarlos.

¿Por qué los equipos corrigen el eje equivocado?

El fallo suele anunciarse como una queja vaga: el color de marca se ve cansado en modo oscuro. El arreglo instintivo es aclararlo — y aclararlo sí hace que el color resalte más, porque aumenta el contraste de luminancia entre el color y el fondo oscuro. Eso es lo que hace tan persistente al instinto: el ajuste produce una mejora visible en el eje equivocado.

Pero lo que se desvaneció no fue la luminosidad — fue la coloridez, y esas son dimensiones distintas. Aclarar un color cromático sin tocar su croma lo empuja hacia el pastel: el azul de modo oscuro se convierte en un azul más pálido y lechoso que ya no coincide con el carácter de la marca, y si cada acento recibe el mismo tratamiento todo el tema oscuro deriva hacia lo dulzón. El color nunca fue demasiado oscuro. Era insuficientemente colorido para su nuevo entorno, y el eje que lo restaura es el croma.

¿Cuán grande debe ser el aumento — y qué lo limita?

En las paletas oscuras derivadas, la cifra de trabajo es un aumento de croma de aproximadamente el 20 %. El azul de marca que corre a C 0,215 en claro pide ≈ C 0,26 en oscuro para leerse igual de vívido. El matiz importa: pide. El aumento es una petición, y la gama sRGB tiene un techo en cada luminosidad — algunos colores se sitúan lo bastante cerca de él que no pueden asumir el 20 % completo.

Tres muestras hacen concreto el patrón. Cada fila muestra el color tal como se entrega en claro, y su versión de modo oscuro con el aumento:

El verde y el ámbar asumen el 20 % completo. El azul no puede: a L 0,546 y tono 262,9°, sRGB se queda sin espacio en torno a C ≈ 0,25, así que el azul aumentado aterriza en el techo en lugar de en la petición. Ese es el límite honesto de la técnica — un color semilla elegido cerca del borde de la gama tiene poco margen restante para el modo oscuro, algo que conviene saber el día en que se elige la semilla, no el día en que se construye el tema oscuro.

Abre la comparación de dos fondos en Scale Composer — las mismas tres muestras con croma idéntico sobre una superficie blanca y una casi negra, para que el apagamiento sea visible antes de aplicar ningún ajuste.

¿Qué colores reciben el aumento?

No todo, y no de manera uniforme.

Rampas de marca y de acento: sí. Estos son los colores cuya viveza es el trabajo — botones, enlaces, destacados, insignias. Asumen el aumento completo, si la gama lo permite — un paso dentro del trabajo mayor de adaptar un color de marca para modo oscuro.

Neutros: apenas, y de forma proporcional. Una escala de neutros con tinte corre a un croma de susurro — valores como C 0,02 — y el aumento escala con el valor, así que se convierte en ≈ 0,024. Eso es invisible en una muestra y aún por debajo de lo que la mayoría de los ojos llamaría “un color”, que es justamente el punto: el aumento preserva la temperatura del neutro sobre el fondo oscuro sin convertir el escenario en un intérprete.

Colores funcionales: sí, luego vuelve a comprobar. Los verdes de éxito, los ámbar de advertencia y los rojos de error se apagan como todo lo demás y necesitan el aumento como todo lo demás — pero también cargan con obligaciones de contraste, y cambiar el croma mueve ligeramente el contraste medido de un color. Una paleta derivada vuelve a comprobar los mínimos de contraste sobre las superficies oscuras después de aumentar, en lugar de asumir que los aprobados del tema claro se trasladan; en Scale Composer los roles oscuros se vuelven a derivar con los mínimos WCAG y el APCA comprobados contra las superficies oscuras.

Mira el ajuste encenderse y apagarse

El aumento es más fácil de evaluar como un antes y un después que como un número. Activa y desactiva el aumento de croma en la paleta oscura — las mismas rampas renderizadas sobre casi negro con el aumento apagado, luego encendido, para que puedas ver cómo lo lavado y lo igual de vívido intercambian lugares en tu propia pantalla.