Dejar de usar negro puro en el modo oscuro.

El modo oscuro ya no es un ajuste minoritario, y la mayoría de temas oscuros elige mal el negro. El negro puro, #000000, queda rotundo en una muestra de color y resulta duro en pantalla. Si el tema oscuro obliga a entrecerrar los ojos, suele ser por esto.

Google lo aprendió al crear Material Design y recomendó una superficie gris oscura, #121212, en lugar de negra. Las razones no son de gusto. Tienen que ver con cómo funciona el ojo y cómo se percibe la profundidad en la oscuridad. Esta es la versión práctica, con las reglas que importan.

Ideas clave

• En vez de partir de #000000, conviene usar un gris oscuro alrededor de #121212 como base, el valor recomendado por Material Design.
• El texto blanco sobre negro puro produce el contraste máximo de una pantalla. Provoca halos y fatiga visual, sobre todo en personas con astigmatismo.
• La profundidad se construye con luz. En la oscuridad, una superficie más elevada es más clara.
• Se deben desaturar y aclarar los colores de marca y volver a comprobar el contraste. Un color que funciona sobre blanco suele fallar sobre oscuro.
• El modo oscuro es un diseño con reglas propias, no un filtro que se activa.

¿Por qué el negro puro es una mala opción inicial?

Porque lleva el contraste más allá de lo útil. El texto blanco sobre negro puro es el máximo contraste que puede producir una pantalla, y el ojo paga el precio. La luz se expande en los bordes de las letras, un efecto llamado halo, que afecta especialmente a quienes tienen astigmatismo. La guía de Material Design señala lo mismo: el texto claro sobre gris oscuro tiene menos contraste que sobre negro, y el gris reduce la fatiga visual.

No es un detalle menor. Un tema oscuro agresivo acompaña a cada lector que lo activa durante sesiones largas y lo cansa poco a poco. La comodidad es el propósito del modo oscuro. El contraste máximo la sacrifica sin que se note de inmediato.

¿De qué color debe ser el fondo?

De un gris oscuro. Material Design recomienda #121212 como superficie base y es un buen punto de partida. Se sigue percibiendo oscuro y cuidado, pero deja de forzar al lector. El negro puro pasa a ser un acento ocasional, no todo el entorno.

Hay una contrapartida real. En pantallas OLED, los píxeles negros se apagan y ahorran energía, por lo que algunas aplicaciones recurren a #000000. Pero las superficies contienen contenido real: fotos luminosas, tarjetas de colores e imágenes de marca vivas. Sobre negro puro, todo salta a un contraste duro. Para algo que se va a leer o mirar más de un instante, el pequeño ahorro de batería no compensa el esfuerzo visual.

¿Cómo se crea profundidad sin sombras?

Una superficie se eleva haciéndola más clara, no añadiendo una sombra debajo. En un tema claro, la elevación viene de la sombra. En la oscuridad, la sombra no tiene dónde proyectarse y desaparece. Material lo resuelve aclarando la superficie a medida que sube. Cuanto más alta la capa, más se acerca al blanco.

Técnicamente es una capa blanca translúcida sobre la base #121212. Cuanto más elevada la superficie, más opaca es esa capa. No hace falta quedarse con las matemáticas, sino con la regla: más alto significa más claro. Ese cambio da a la interfaz oscura las capas que perdería en un vacío negro plano.

Material publica las cifras:

Fuente: Material Design, tema oscuro.

¿Qué pasa con los colores de marca?

Hay que suavizarlos. Los colores saturados que destacan sobre blanco vibran sobre un fondo oscuro y cansan la vista. Conviene desaturarlos, aclararlos y reducir su intensidad. El objetivo es legibilidad y comodidad.

Después se vuelve a comprobar el contraste, porque el modo oscuro rompe las suposiciones anteriores. Un color de texto que superaba el umbral WCAG AA de 4.5 a 1 sobre blanco puede fallar sobre oscuro. El tema oscuro se comprueba por separado. Es otra superficie, con otros cálculos.

El modo oscuro es un diseño propio

No es un filtro que se activa al final. Es un segundo diseño del mismo producto, con su propio fondo, su modelo de profundidad y su color. Se elige un gris oscuro cercano a #121212, se elevan las superficies con luz, se suaviza el color y se revisa cada valor de contraste. Nada es difícil. Todo marca la diferencia entre un tema en el que la gente se queda y uno que abandona.

Estas pequeñas reglas explican gran parte de la comodidad de una interfaz. Para otra con un gran efecto, más abajo se explica cómo la ley de Fitts decide si los botones resultan fáciles o difíciles de pulsar.