Buenas prácticas para paletas de color en modo oscuro

El primer tema oscuro que publiqué fue, visto en perspectiva, un desastre. Cogí nuestra interfaz clara, pasé todos los colores por un filtro de "invertir", ajusté unos cuantos valores a mano y lo di por terminado. En Figma se veía bien. Luego llegaron los tickets de soporte: texto que "zumbaba", botones de marca que resplandecían como caramelos radiactivos, tarjetas que se fundían todas en una sola lámina plana de oscuridad. La lección caló. Una buena paleta de color para modo oscuro no es una paleta clara puesta del revés. Es su propio problema de diseño, con sus propias reglas, y la mayoría de esas reglas van en contra de tus instintos.

Esto es lo que ojalá alguien me hubiera dicho antes de aquel primer intento.

El modo oscuro no es una inversión

Cuando inviertes un tema claro, todas las relaciones que lo hacían funcionar se desordenan. El texto blanco sobre un botón azul marino puede ser perfecto, con un contraste de 8:1, en modo claro; invíertelo y podrías acabar con un botón pálido y texto gris que falla por completo en accesibilidad. Las sombras, que cargan con buena parte de la profundidad en las interfaces claras, prácticamente desaparecen sobre un fondo oscuro: una sombra negra al 10 % sobre una superficie casi negra es invisible. Los colores saturados que se leen como seguros y amables sobre blanco se vuelven agresivos y vibrantes sobre negro.

Así que el modelo mental que uso es este: un tema oscuro es un conjunto independiente de decisiones de diseño que casualmente comparte la misma maqueta y la misma marca. Estás resolviendo de cero el contraste, la jerarquía, la profundidad y el color de acento, contra un lienzo oscuro. Si tu flujo de trabajo te permite mantener dos conjuntos de color (los tokens semánticos son la forma limpia de hacerlo; más sobre esto en nuestro artículo sobre tokens de color en sistemas de diseño), este es el momento en que da sus frutos.

Usa gris oscuro, no negro puro

Este es, con diferencia, el error más común, y merece la pena entender por qué falla el negro puro en lugar de que simplemente te digan que lo evites.

El negro puro (#000000) combinado con texto blanco puro (#FFFFFF) puntúa técnicamente 21:1, el ratio de contraste máximo posible. Pensarías que el máximo contraste es el objetivo. No lo es. Ese salto extremo de luminancia provoca halación: sobre un fondo oscuro la pupila se dilata para dejar entrar más luz, y el texto brillante se desborda y se emborrona en los bordes. Para las personas con astigmatismo —una porción enorme de la población— el efecto convierte los párrafos en una papilla resplandeciente y fatigosa. Las sesiones largas de lectura se vuelven genuinamente incómodas.

Hay un segundo problema, más práctico. Si tu capa base es #000000, no tienes adónde ir hacia abajo. No puedes hacer una superficie más oscura que el negro, así que cualquier sensación de profundidad hundida desaparece, y las sombras no tienen sobre qué caer.

La solución es partir de un gris muy oscuro. Material Design, de Google, recomienda #121212 como superficie oscura de referencia, y tras años construyendo estas paletas creo que se acerca a la perfección. Es lo bastante oscuro para leerse como "modo oscuro", pero deja margen en ambas direcciones. Para el texto, descarta el blanco puro en favor de un blanco roto en el rango #E0E0E0 a #F2F2F2. El blanco sobre #121212 a ese nivel sigue superando con holgura la WCAG mientras elimina el resplandor de la halación.

Una paleta neutra de partida a la que recurro a menudo:

• Fondo base: #121212
• Texto principal: #E6E6E6 (énfasis alto)
• Texto secundario: #A8A8A8 (énfasis medio, todavía muy por encima de 4,5:1)
• Texto deshabilitado / pista: alrededor de #6E6E6E

Un truco sutil: tiñe tus grises oscuros muy ligeramente hacia el tono de tu marca en lugar de usar grises neutros puros. Una base de #131316 con un pelín de azul, o #14110F con un toque de calidez, transmite intención y marca en vez de parecer un tema por defecto. Mantenlo sutil: unos pocos puntos de saturación como mucho.

Transmite la elevación con superficies más claras, no con sombras

En modo claro, una tarjeta flota sobre la página gracias a su sombra. En modo oscuro las sombras apenas se perciben, así que invertimos la lógica: cuanto más alta está una superficie, más clara se vuelve. Un modal es más claro que la tarjeta que cubre, que a su vez es más clara que la página de detrás.

Material lo formaliza como una capa de elevación: una capa blanca semitransparente aplicada sobre la superficie base, que se vuelve más opaca a medida que aumenta la elevación (de un 0 % aproximadamente en la base hasta cerca de un 16 % en el nivel más alto). No tienes que implementar la fórmula literal de la capa; puedes simplemente fijar los resultados en tokens discretos. Una escala que he publicado y en la que confío:

• Nivel 0 (página): #121212
• Nivel 1 (tarjetas): #1E1E1E
• Nivel 2 (menús, paneles elevados): #242424
• Nivel 3 (diálogos, modales): #2C2C2C
• Nivel 4 (popovers, hojas superiores): #333333

Cada paso es solo un puñado de puntos más claro, y esa contención importa: los saltos deben sentirse, no anunciarse. Usado de forma coherente, esto da a tu interfaz una profundidad real sin una sola sombra, y resuelve la queja de "todo se funde" que arruinó mi primer intento. Aún puedes superponer una sombra tenue para una separación extra, pero es el cambio de luminosidad el que hace el trabajo pesado.

Desatura tus colores de acento

Coge el color estrella de tu marca —digamos un azul SaaS contundente como #2563EB— y suéltalo sobre un fondo #121212. Vibra. Los colores muy saturados contra un campo oscuro producen un zumbido óptico, y a menudo no superan el contraste para texto o iconos aunque se vean llamativos.

La solución es contraintuitiva: baja la saturación hacia abajo y sube la luminosidad hacia arriba. La recomendación de Material es usar tintes más claros (piensa en el rango de 200 a 50 de una escala de color) y desaturarlos hasta que superen el 4,5:1 contra la superficie oscura. En la práctica, desaturo los colores de marca en torno a un 20–40 % para el modo oscuro y los aclaro, y luego compruebo el número.

En concreto, ese #2563EB podría convertirse en algo como #7AA2F7 en modo oscuro: más suave, más claro y mucho más legible contra la superficie oscura. Tu acento de modo claro y tu acento de modo oscuro son hermanos, no el mismo valor. Este es exactamente el tipo de exploración pareada claro/oscuro para la que está hecho el generador de paletas de color: elige tu tono y luego ajusta la saturación y la luminosidad mientras observas el número de contraste actualizarse en vivo.

Unas cuantas advertencias honestas:

• Mantén reconocibles los colores semánticos. El rojo de error, el verde de éxito y el ámbar de advertencia tienen que seguir leyéndose como rojo, verde y ámbar después de desaturarlos. Aclara y suaviza, pero no desvíes el tono tan lejos que un error deje de parecer peligro.
• Los grandes rellenos de color son distintos del texto. Un gran banner saturado puede sobrevivir con más saturación que una etiqueta pequeña, porque no le estás pidiendo a nadie que lea texto fino sobre él.
• No apliques capas de elevación a superficies coloreadas. Un botón de color primario mantiene su color en todos los niveles de elevación; solo tus superficies neutras se aclaran a medida que ascienden.

Mantén el contraste WCAG, en ambas direcciones

Los objetivos de accesibilidad no cambian en la oscuridad. La WCAG 2.1 exige 4,5:1 para el texto de cuerpo normal y 3:1 para el texto grande (y para los componentes de interfaz e iconos con significado). Lo que cambia es que los fallos son más escurridizos.

La trampa que veo con más frecuencia es el texto en gris de medio tono —algo como #888888 sobre #121212— que se ve elegante y falla en silencio en el texto secundario. Comprueba siempre los números reales. La referencia oficial es la guía de contraste de la WCAG del W3C, y cualquier verificador de contraste (incluido el que viene integrado en nuestro generador de paletas de color) te dará el ratio en segundos.

Dos cosas que conviene saber al probar. Primero, "más contraste siempre es mejor" es falso en modo oscuro: el blanco puro maximiza el número pero dispara la halación que he descrito, así que estás optimizando para una legibilidad cómoda, no para el ratio más alto posible. Segundo, la próxima generación del estándar, WCAG 3.0, sustituye el simple ratio por APCA (el algoritmo avanzado de contraste perceptual), que modela cómo percibe realmente el ojo el texto claro y oscuro y maneja la polaridad mucho mejor. Todavía está en borrador, así que publica contra la WCAG 2.1 hoy, pero si quieres prepararte para el futuro, pasa tu paleta oscura por un verificador APCA como prueba de cordura: es notablemente más honesto con los fondos oscuros.

Pruébalo donde la gente lo usa de verdad

Una paleta oscura puede superar todas las comprobaciones en Figma y aun así fallar en el mundo real. La variable que más subestimé al principio fue la propia pantalla: los paneles OLED muestran #000000 como píxeles realmente apagados, con un contraste brutal frente al texto iluminado, mientras que las LCD más baratas levantan los negros y deslavan tus pasos de elevación cuidadosamente afinados. La paleta que se ve estratificada en tu monitor puede verse plana en el portátil económico de otra persona.

Mi lista de comprobación para pruebas, aprendida por las malas:

• Míralo en un móvil OLED real con brillo bajo, de noche. Aquí es donde se revelan la halación y la sobresaturación. Si es cómodo aquí, es cómodo en todas partes.
• Comprueba los pasos de elevación en una LCD barata. Si tus tarjetas desaparecen contra el fondo, tus pasos son demasiado sutiles.
• Alterna entre claro y oscuro en vivo. Los destellos bruscos de brillo suelen significar que tu base oscura es demasiado clara o tu base clara demasiado gris.
• Míralo con imágenes y contenido de usuario. Fotos reales, avatares y multimedia incrustada se asientan sobre tus superficies y pueden chocar de formas que un mockup limpio nunca muestra.
• Confirma que los estados de foco y los bordes sobreviven. Los bordes sutiles de 1px que definían los inputs en modo claro a menudo desaparecen en la oscuridad y necesitan un valor más claro.

La versión corta

Si tuviera que comprimirlo todo en un puñado de movimientos: parte de #121212, nunca de #000000. Usa texto en blanco roto, no en blanco puro. Muestra la profundidad aclarando las superficies elevadas, ya que aquí las sombras apenas existen. Desatura y aclara tus acentos hasta que dejen de zumbar y empiecen a superar el contraste. Mantén la línea en 4,5:1 para el texto de cuerpo, pero resiste la tentación de perseguir el máximo. Y prueba en una pantalla OLED real en una habitación a oscuras, porque ese es el único entorno que tus mockups nunca podrán simular.

Bien hecho, un tema oscuro no es solo una opción cortés para las aves nocturnas: es una versión más tranquila y más enfocada de tu producto. Solo hace falta tratarlo como el problema de diseño distinto que en realidad es.