Más opciones de modo oscuro

La primera página, en /oscuro/, dejó fijo el ambiente oscuro que ya existe (papel #0a0a0a, tinta #f3f1ea) y propuso nueve valores de acento para reemplazar el verde. Esta página hace lo contrario: el ambiente entero es lo que está en discusión. Cada propuesta trae su papel, su superficie, su tinta, su tinta apagada, sus líneas y los cuatro acentos derivados de ese fondo. Por eso los códigos empiezan en N, para que no se confundan con los O de la primera, y por eso ninguna repite lo que allá se propuso.

Esta página está escrita con la propuesta N01 en modo oscuro. El interruptor de arriba a la derecha la enciende. Los paneles de cada sección llevan sus colores fijos, así que se ven igual con el interruptor en cualquier posición: son muestras, no interfaz.

Cada sección trae lo mismo, en este orden: un panel con la paleta aplicada de verdad (barra de navegación con la marca de anillos y el nombre completo de la Compañía de Innovación de Santiago, bloque de texto con enlace y énfasis, tarjeta, botón relleno, botón fantasma y distintivo), una franja con el acento de las cuatro marcas sobre ese fondo, la tabla de tokens con su contraste, la tabla de las cuatro marcas, y qué gana y qué cuesta. El contenido de los paneles es siempre el mismo, palabra por palabra, para que lo único que cambie entre una propuesta y otra sea el color.

Los ratios son WCAG 2.1, calculados sobre la luminancia relativa de sRGB con la fórmula de las pautas. El mínimo para texto normal es 4,5:1, para texto grande 3:1, y para bordes y controles 3:1 según el criterio 1.4.11. Los tonos se miden en OKLCH, que es donde "el mismo tono" significa lo que el ojo entiende por lo mismo. Cuando digo que un acento conserva el tono, quiere decir que tomé el tono y el croma OKLCH del acento del modo claro y solo despejé la luminosidad que alcanza el ratio que quería contra ese papel. Cuando el croma no cabe en sRGB a esa luminosidad, se recorta al máximo que cabe, nunca por debajo.

La distancia entre dos acentos se informa como distancia euclídea en OKLab, en milésimas, para poder decir con un número cuánto se parecen dos marcas. Sirve de referencia: los acentos de la Compañía de Innovación de Santiago y de la Compañía Chilena de Inteligencia de Datos están a 203 milésimas de día, y el verde vigente contra el azul de la otra marca está a 192.

La marca de la Compañía de Innovación de Santiago son los dos anillos; la del Círculo de Santiago es un anillo; la de la Compañía Chilena de Inteligencia de Datos es el cuadrado sin esquina redondeada, que en modo oscuro toma el acento, como ya autoriza su propio archivo de tokens; illanes00 no tiene marca gráfica y va con su wordmark en monoespaciada.

El papel del modo claro, #f6f5f1, tiene tono OKLCH 95 y croma 0,005. Aquí baja a luminosidad 19 y el croma sube a 0,010, el doble, porque una desviación de 0,005 a esa oscuridad queda por debajo de lo que una pantalla común distingue. Ese doble es criterio mío, no una medición. La tinta tampoco es blanca: es la crema de la casa, #e3e0d9. El resultado es un ambiente de papel apagado, no de pantalla apagada. El Círculo de Santiago ya hace algo parecido hoy con su papel #0c0b08, así que esta propuesta extiende una decisión que el sistema ya tomó, en vez de inventar una.

El papel se construye con el tono OKLCH del acento claro de cada marca: 256 para la Compañía de Innovación de Santiago, 283 para el Círculo de Santiago, 264 para la Compañía Chilena de Inteligencia de Datos. Luminosidad 20 y croma 0,033 en los cuatro casos. Cada entidad tiene entonces su propia habitación, y el acento solo tiene que ser una versión clara del mismo color. Ninguna marca cambia de tono en ningún momento, ni el fondo ni el acento.

Papel #040404, tinta #fbf9f7, 19,52:1. Los acentos no conservan el croma del modo claro: se les sube al máximo que cabe en sRGB a la luminosidad que da 8,5:1. Es la propuesta pensada para tablas largas, código y documentos, donde lo que importa es que el ojo no tenga que decidir nada.

Papel #2e3235, de luminancia relativa 0,031, diez veces la del papel vigente #0a0a0a. La tinta baja a #d2d8dc, que da 8,99:1 sobre el papel y 7,39:1 sobre la tarjeta. Sigue muy por encima del mínimo de 4,5:1, pero deja de tener el filo de un titular impreso.

Este panel usa el papel y la tinta de N01 con los acentos del modo claro sin tocar: #1e3a5f, #1a1a2e, #1d4ed8 y #3763e0. Es un control, no una propuesta que recomiende. Está aquí porque la pregunta merecía una medición y no una opinión.

La conclusión no es que la idea sea mala, sino que el fondo tiene que subir mucho más de lo que uno imagina para que un acento oscuro siga funcionando. Eso es lo que mide N06.

Para cada marca busqué el papel más oscuro que todavía deja su acento del modo claro en 4,5:1. La fórmula sale de despejar la luminancia relativa del fondo en la definición de contraste de las pautas. Los cuatro resultados no se parecen entre sí, y ese es el hallazgo.

Una medición más, para cerrar: la tinta apagada de illanes00 sobre su papel de penumbra queda en 4,47:1, que no llega a 4,5:1. Toda la escala de grises habría que recalcularla papel por papel.

Un acento cumple dos trabajos distintos que hoy se resuelven con un solo valor. Como texto y como enlace tiene que contrastar con el papel, y ahí un navy oscuro sobre fondo oscuro no puede funcionar. Como relleno de botón o de bloque, en cambio, lo que tiene que contrastar es el texto de encima, y ahí el navy #1e3a5f con texto claro da 11,50:1 sin despeinarse. Esta propuesta parte el token en dos: --accent aclarado para la tinta y --accent-fill intacto para las superficies.

De día la casa es papel cálido, tono 95, con tinta fría, tono 237. El modo oscuro vigente invierte esa relación: papel sin tono y tinta cálida, tono 94. N08 la conserva: papel cálido #15140f, tinta #d7e2ec con tono 245. Es la misma cantidad de luz que N01, en la temperatura contraria, y es la propuesta que responde a un defecto que la primera página dejó diagnosticado y sin arreglar.

Todo el software oscuro hace lo mismo, que es aclarar la superficie elevada. Esta propuesta hace lo contrario: papel #27251f a media altura y tarjetas #0e0c08 por debajo, con la línea más clara que las dos, 1,90:1 contra el papel. La metáfora deja de ser la luz y pasa a ser el hueco, que es más cercana al material impreso del que sale el sistema.

Cada franja es el papel real de la propuesta, con su propia tinta escrita encima. Los valores de la tabla son los de la Compañía de Innovación de Santiago, que es la marca con el problema original.

La columna de separación mide la distancia OKLab, en milésimas, entre el acento de la Compañía de Innovación de Santiago y el de la Compañía Chilena de Inteligencia de Datos. De día están a 203 y con el verde vigente a 192. Ninguna propuesta que conserve el tono se acerca a eso, y esa es la factura de exigir que el tono no cambie: N09 llega a 87 y N03 se queda en 22.

Dos filas van marcadas como medición y no se comparan con el resto. N05 usa el papel de N01 con los acentos del modo claro sin tocar, y N06 no es un modo oscuro sino un modo tenue: su tarjeta es más clara que su papel, al revés que en las siete propuestas, así que sus columnas de tarjeta salen mejores que las de papel y no son el peor caso de nada. La última columna es el peor valor de los que muestra esa fila, que son siempre los de la Compañía de Innovación de Santiago; el peor valor de N06 en todas sus marcas es otro, la tinta apagada de illanes00 a 4,47:1, y está en su propia sección.

Una advertencia sobre la cuarta marca: illanes00 corre sobre su propio sistema, el v5 en vps-dev, y quedó fuera del alcance de la armonización. Está en todas las tablas porque el encargo pedía las cuatro, no porque haya que aplicarle nada. Su acento y el de la Compañía Chilena de Inteligencia de Datos, además, nacen casi idénticos: de día están a 59 milésimas y en cualquier modo oscuro que conserve el tono caen por debajo de 6.

La razón es una y se puede discutir: de todo lo que el grupo tiene, lo más reconocible no es el azul marino sino el papel crema. Un modo oscuro que apaga el papel a negro puro tira justamente lo único que ninguna otra casa comparte. N01 conserva el tono del papel en los dos modos, mantiene la mejor separación entre las dos marcas azules de todas las propuestas que respetan el tono del acento (78 milésimas), y no tiene ninguna medición bajo 4,5:1. Además no inventa nada: el Círculo de Santiago ya tiene un papel oscuro cálido, #0c0b08, así que esto lo generaliza.

El agregado de N07 resuelve el reclamo de fondo, que era que la marca no se reconoce de noche: el navy exacto sigue apareciendo en cada botón relleno, con su borde de un píxel, y solo el texto usa la versión aclarada. Si en cambio la molestia era el casi negro y no el acento, la respuesta es N09, que sube el papel a media altura y hunde las tarjetas.

Lo que no recomiendo: N05 y N06 no son opciones, son la demostración medida de que el acento no puede quedarse quieto. Y N03, con los acentos saturados al máximo, convierte a la Compañía de Innovación de Santiago y a la Compañía Chilena de Inteligencia de Datos en la misma marca.

Los dos bloques oscuros hay que tocarlos por separado, el de prefers-color-scheme y el de data-theme, porque el sistema los declara dos veces. El token --on-accent es nuevo y es obligatorio: sin él, el texto blanco escrito a mano en base/components.css queda en 2,65:1 sobre el acento claro.

El acento del Círculo de Santiago cambia de #c8c8e4 a #9c9db8 solo porque el papel cambió: sobre el papel cálido, el lavanda actual daría 11,27:1, que pasa de sobra pero deja al Círculo de Santiago más claro que todos los demás. Si se prefiere no tocarlo, se puede dejar como está sin romper nada.

Nada de esto está aplicado. El sistema sigue sirviendo el verde #7fc598 de noche, y no se tocó ningún archivo de core-style. Esta página es solo la propuesta, y la primera, en /oscuro/, sigue en pie con sus nueve opciones de acento.