Probar una paleta oscura

El tema oscuro pasó la revisión. En una pantalla de oficina bien iluminada al mediodía, cada pantalla se veía impecable: texto nítido, tarjetas ordenadas, el acento de marca brillando de maravilla. Tres semanas después del lanzamiento llegaron comentarios de otro planeta: por la noche, los títulos en blanco puro “brillan como un faro”, las tarjetas se funden con la página y nadie distingue sobre qué fila de la tabla está el cursor. Nada en la revisión fue deshonesto; simplemente se hizo bajo la única condición para la que el modo oscuro no está pensado.

Probar el modo oscuro es una pasada de reverificación, ordenada según lo que de verdad se rompe: el contraste del texto en cada combinación, la separabilidad de superficies, la visibilidad de los estados, el deslumbramiento, la seguridad para la visión del color, el contenido real con el brillo nocturno y los medios sin adaptar. Las pasadas del modo claro no traspasan nada: la física cambia, así que cada comprobación se ejecuta de nuevo. Esta es la lista de control de calidad para las paletas construidas en nuestra guía de modo oscuro: siete comprobaciones, cada una con su número y su método.

1. ¿Sigue superando el contraste cada combinación de texto?

Los mínimos son los mismos —4,5:1 para el texto de cuerpo, 3:1 para el texto grande y los componentes de interfaz, según el mínimo de contraste de WCAG—, pero cada ratio es nuevo, porque los dos lados de cada combinación cambiaron. Un núcleo de marca que sostenía el texto de cuerpo sobre blanco puede caer a ≈3,3:1 en una página casi negra; un borde que se registraba sobre claro puede desvanecerse sobre oscuro.

Método: vuelve a medir cada combinación texto/superficie contra los valores oscuros, no los claros. Scale Composer vuelve a derivar los roles semánticos por tema con los mínimos aplicados y con APCA reportado en paralelo, de modo que las combinaciones del tema oscuro llegan como valores comprobados en lugar de portados.

2. ¿Puedes distinguir superficies vecinas?

Los temas oscuros señalan la elevación con la luminosidad — las superficies elevadas son más claras—, lo que comprime varios pasos casi negros en una banda estrecha. Cuando dos peldaños adyacentes de esa escalera están demasiado cerca, las tarjetas se funden con las páginas y los menús con las tarjetas. El umbral que conviene recordar: por debajo de unos 0,02 L de separación, dos superficies se leen como una para la mayoría de las personas —la diferencia apenas perceptible, y el punto donde Scale Composer lanza su aviso de JND—. Las escaleras cómodas son más amplias, en torno a 0,04–0,09 L por peldaño.

Método: recorre la escalera de elevación desde la página hasta la superficie más alta y comprueba que el ΔL de cada par adyacente sea ≥ ≈0,04.

Abre los roles oscuros en el panel de contraste de Scale Composer — cada combinación de texto revisada con su mínimo, los pasos de la escalera de superficies listados con sus valores de luminosidad, APCA junto a los ratios.

3. ¿Siguen siendo visibles los estados hover y pressed?

En modo claro, los estados interactivos suelen oscurecerse; en una superficie oscura la dirección visible es hacia arriba: los pasos de hover y pressed van más claros. Un tema portado sin invertir esa dirección produce estados que técnicamente cambian de valor pero se leen como nada. La aritmética es la misma que en la comprobación de superficies: los pasos de estado quieren ≈0,04 L o más entre ellos, en la dirección más clara.

Método: activa hover y pressed en los botones, filas y elementos de lista del tema oscuro; confirma que cada paso es visible y se mueve hacia más claro, no más oscuro.

4. ¿Brilla el texto blanco?

El #fff puro sobre una página casi negra se sitúa en ≈17:1 —mucho más contraste del que pide cualquier mínimo— y ese excedente es el problema: se suele reportar que el texto de alta luminosidad sobre un campo oscuro florece o crea halo, un efecto conocido como halación, sobre todo de noche y para lectores con astigmatismo. Un blanco roto en torno a L ≈0,9 sigue midiendo ≈13:1 —casi el triple del mínimo— y se lee más tranquilo. El cambio cuesta un margen que nunca hizo falta.

Método: comprueba que el texto de cuerpo sea un blanco roto (de la clase L ≈0,9), reservando los valores más brillantes para momentos pequeños y deliberados; y júzgalo con brillo bajo, no al mediodía.

5. ¿Qué pares se rompen con la deficiencia en la visión del color?

Los temas oscuros cambian qué combinaciones son arriesgadas: los pares que se separaban por luminosidad sobre blanco pueden quedar a una luminosidad similar en el rango oscuro comprimido, dejando el tono como única señal, justamente la señal que elimina la deficiencia en la visión del color. El verde de éxito frente al rojo de error a una L similar es la víctima clásica.

Método: pasa la paleta oscura por las tres simulaciones del selector de Visión de Scale Composer y vuelve a revisar específicamente los pares funcionales.

6. ¿Aguanta con contenido real, de noche?

Una revisión de paleta con brillo diurno sobre texto de relleno se pierde lo que ven los usuarios: el modo oscuro se usa de noche, con brillo de pantalla bajo, donde las sombras se comprimen y los pequeños pecados de contraste se convierten en texto invisible. El contenido real también tensiona lo que las muestras nunca enseñan: párrafos largos, tablas de datos densas, campos de formulario con texto de marcador de posición, estados deshabilitados.

Método: una pasada al anochecer en una habitación oscura con la pantalla a brillo bajo, leyendo páginas reales: texto largo, tablas, formularios. Esta es la condición para la que existe el tema; debería ser la condición en la que se juzga.

7. ¿Encajan las imágenes y los embeds con el tema?

La paleta se adapta; las fotografías no. Una foto de producto o un gráfico con fondo blanco brillante queda en una interfaz oscura como una ventana encendida, y los embeds publicitarios o los iframes traen sus propios esquemas. El patrón habitual es atenuar suavemente el contenedor —una línea de CSS como filter: brightness(0.85) en los contenedores de medios en modo oscuro— más variantes oscuras para las imágenes que controlas.

Método: revisa cada vista con medios en modo oscuro y confirma que los recursos brillantes estén atenuados, sustituidos o aceptados deliberadamente.

La lista, ejecutable

Empieza por la comprobación que falla en silencio

Los fallos de contraste se anuncian solos; las superficies que se funden simplemente aplanan el diseño en silencio. Ejecuta la comprobación de separabilidad de superficies en una escalera oscura — los pasos casi negros con sus diferencias de ΔL medidas, el aviso de JND marcando cualquier par demasiado cercano para distinguirlo, para que las tarjetas que mantuvieron sus bordes al mediodía los mantengan también a medianoche.