Por qué la máxima saturación es contraproducente en la UI

Esboza el mismo panel de analítica dos veces. En la primera versión, cada elemento ronda el croma máximo del color semilla azul, ≈0,22 — barra de cabecera, barra lateral, tarjetas de KPI, series del gráfico, botones, cada uno tan vívido como permita la gama. En la segunda, solo la acción principal y el elemento de navegación activo conservan esa viveza, y todo lo demás baja a algún punto entre ≈0,01 y ≈0,10. Como miniaturas, la primera parece más animada. A tamaño real, tres horas después de empezar la jornada, el orden se invierte — y las razones por las que se invierte se generalizan a la mayoría de los colores saturados en la UI.

La máxima saturación es contraproducente en las interfaces por cuatro razones que se acumulan: los campos de croma alto adyacentes mantienen agitados los bordes del vecino, lo que cansa la vista en sesiones largas; la viveza uniforme aplana la jerarquía, porque el énfasis es relativo y una señal enviada desde todas partes no es ninguna señal; el croma juega en contra de la legibilidad del texto en los niveles de contraste que exige la lectura; y los rellenos vívidos se sitúan justo en la zona de luminosidad donde menos colores de texto superan los pisos de accesibilidad. La saturación se comporta como un presupuesto — gastada en todas partes, no compra nada. Este artículo aborda las cuatro por turnos y termina donde el presupuesto debería ir realmente; la maquinaria de rampas en la que se apoya vive en nuestra guía de escalas de color.

¿Por qué más saturación se ve mejor en el selector?

Porque una muestra no compite con nada. Ante dos fichas aisladas del mismo tono, la mayoría prefiere la más vívida — la viveza se lee como energía, confianza, novedad — y el selector de color es exactamente ese contexto: un solo parche, juzgado en solitario, donde cada paso hacia el borde de la gama parece una mejora. Llámalo pensamiento de muestra.

Una interfaz es el contexto opuesto: docenas de áreas de color juzgadas de forma simultánea, durante horas, mientras alguien intenta hacer otra cosa completamente distinta. La pregunta que importa pasa de ¿esto es atractivo? a ¿qué le hace esto a todo lo que tiene al lado? — y es en esa segunda pregunta donde la máxima saturación empieza a perder.

¿Qué hace el croma alto en todas partes a lo largo de una sesión?

Mantiene la pantalla visualmente ruidosa de una forma en la que el ojo no llega a asentarse. Donde se encuentran dos campos saturados, cada uno altera la apariencia del otro — una instancia del efecto de contraste, que en color se conoce como contraste simultáneo — así que el límite entre un panel azul vívido y un gráfico verde vívido nunca llega a aquietarse del todo; los bordes conservan una vibración baja que el observador registra sin nombrar. Un límite así es un acento. Un panel construido a base de ellos es una sala donde todos gritan: soportable para una demo, agotador para una jornada de trabajo. Las interfaces pensadas para sesiones largas — paneles, editores, herramientas de administración — son las que más tienen que perder, y por eso sus paletas son tradicionalmente las más contenidas.

¿Por qué la viveza uniforme aplana la jerarquía?

Porque el énfasis es relativo por naturaleza. Un elemento se lee como enfatizado cuando carga con más de algo — más tamaño, más peso, más color — que su entorno; quita la diferencia y el énfasis se va con ella, sin importar los valores absolutos. Un botón vívido en una página apagada es un punto de referencia. El mismo botón en una página donde cada panel iguala su croma es camuflaje.

La intuición que conviene guardar: el color gasta atención, y la atención es el presupuesto. Cada área saturada en pantalla puja por el ojo del observador, y las pujas compiten — un presupuesto gastado en todas partes no compra nada en ninguna. El panel contenido del principio gasta casi todo en un solo elemento, y por eso su única acción vívida se lee al instante.

Aquí están las dos versiones en números, usando una rampa azul generada a partir del color semilla #2563eb — oklch(0.546 0.215 262.9):

Una fila merece una nota: la columna de «todo vívido» es en parte ficción, porque los fondos de tarjeta casi blancos no pueden sostener un croma de 0,22 — la gama deja casi nada de espacio para el color a luminosidad alta, así que la petición queda recortada a una fracción de sí misma. Incluso el maximalismo choca con el techo. La columna contenida, por su parte, no es un invento especial: esos son aproximadamente los valores que una rampa con perfil de campana ya produce a lo largo de sus pasos claros, con el croma reservado para el núcleo.

Abre la rampa contenida en Scale Composer — el croma alcanza su pico en el núcleo de marca, los pasos de apoyo cargan ≈0,01–0,10, el presupuesto visible como una curva.

¿Qué le hace la saturación al texto?

A tamaños de lectura, juega en tu contra por partida doble.

Primero, de forma directa: en los niveles de contraste que exige la lectura, el croma añadido tiende a reducir la legibilidad cómoda en lugar de añadir énfasis. Es una afirmación sobre la que el motor de Scale Composer toma postura — cuando elige roles de texto, puntúa a los candidatos por contraste suficiente más la mejor legibilidad en lugar del contraste máximo, y aplica una penalización de croma que depende de la luminosidad: el texto claro se penaliza con más dureza por cargar croma, y los roles de leyenda eligen el paso más sutil que aún supera el umbral. La contención que defiende este artículo está codificada en esa puntuación.

Segundo, de forma indirecta: el croma máximo solo está físicamente disponible en los tonos medios — cerca del blanco y cerca del negro la gama permite poco color — así que un relleno máximamente vívido es también un relleno de luminosidad media, y la luminosidad media es el peor terreno para el texto. Sobre un relleno vívido del paso 500 a una luminosidad de ≈0,63, el texto blanco cae en torno a ≈3,7:1, por debajo del piso de 4,5:1 para texto en tamaño de cuerpo. Subir la saturación arrastra los fondos justo a la zona donde el conjunto de colores de texto que superan el umbral es más pequeño.

¿Para qué sirve realmente la saturación plena?

Puntuación. Áreas pequeñas, momentos breves, la única acción que importa: la viveza funciona cuando es escasa, porque la escasez es lo que la convierte en señal. Un préstamo útil del diseño de interiores es la regla 60-30-10 — dominante, de apoyo, acento — traducida a términos de croma: la mayor parte de la pantalla casi neutra a ≈0,01–0,03, el color de apoyo en torno a ≈0,06–0,10, y el croma pleno reservado para el nivel de acento — la acción principal, el estado activo, el único número que cambió. Los momentos transitorios pueden permitirse más que los elementos permanentes: un toast a croma alto se va antes de cansar; una cabecera nunca se va.

Nada de esto aboga por el beige. Aboga por la pendiente — una paleta que va de lo tranquilo a lo ruidoso tiene un ruido que vale la pena usar. La forma más rápida de sentir la diferencia es destruirla: toma la rampa contenida y sube el croma de cada paso hacia el techo — mira cómo se aplana la jerarquía a medida que el presupuesto se dispersa, luego vuelve atrás y observa cómo el único momento vívido empieza a significar algo de nuevo.