No inviertas tu paleta clara. Un tema oscuro funciona cuando el fondo es un gris oscuro y no negro puro, el texto es un blanco apagado y no blanco puro, los colores de acento son más claros y menos saturados que sus versiones del modo claro, y cada par de texto y fondo se mide de nuevo, porque pasar en un tema no dice nada del otro.
¿Por qué sale mal invertir una paleta clara?
La inversión da vuelta la luminosidad y deja todo lo demás igual, y varias cosas de una paleta no sobreviven a eso. Un azul medio que era lo más oscuro en una página blanca pasa a ser lo más tenue en una negra. Un tinte pálido usado para estados de hover y fondos de tarjetas pasa a ser un casi negro que desaparece en la página. Una sombra, que era una mancha oscura bajo una tarjeta blanca, no tiene nada que oscurecer.
El mejor enfoque es que un tema oscuro es una segunda paleta que comparte tonos con la primera. Mantienes el tono de cada color para que la marca se reconozca, y eliges de nuevo luminosidad y saturación para el nuevo fondo. Si tu paleta clara se construyó con una escala de pasos de muy claro a muy oscuro, el tema oscuro en su mayor parte elige otros pasos de la misma escala.
¿Es un problema el blanco puro sobre negro puro?
Es el máximo contraste que permite la fórmula, 21:1, y esa es la razón por la que puede ser una mala elección. Grandes áreas de texto blanco sobre negro dan las letras más brillantes posibles contra el fondo más oscuro posible. Algunos lectores, entre ellos personas con astigmatismo, cuentan que el texto brillante sobre un fondo muy oscuro parece brillar y difuminarse en los bordes. Qué tan común es eso, y cuánto importa para una persona y una sala concretas, no está resuelto, así que tómalo como una razón para probar y no como una regla.
El remedio habitual es barato. Un gris oscuro como #121212 para la página y un blanco apagado como #E6E6E6 para el texto del cuerpo siguen dando 15,0:1, muy por encima del nivel 7:1 del escalón más estricto de WCAG. Blanco sobre #121212 es 18,7:1. Cedes muy poco contraste y le quitas la dureza. Una página de negro puro sí tiene un argumento real a favor: en algunas pantallas OLED los píxeles negros están apagados. Que eso te importe es una cuestión de batería, no de legibilidad.
¿Por qué los colores saturados se ven mal sobre fondo oscuro?
Porque un color que se leía tranquilo sobre blanco se lee estridente sobre oscuro. Un azul o un rojo vivo contra un fondo casi negro vibra, y el mismo valor hex se siente más intenso cuando está rodeado de oscuridad. La solución a la que recurren los diseñadores es aclarar el acento y quitarle algo de saturación, para que se quede atrás en lugar de saltar hacia adelante. Eso se hace color por color a ojo, y se comprueba después, porque aclarar cambia el número que estás por medir.
Un efecto secundario que conviene esperar: la versión oscura de un color de marca es otro valor hex, aunque deba ser reconociblemente el mismo color. Eso significa dos valores que mantener por cada color que uses, el mismo costo que trae un segundo espacio de color más amplio. Un conversor de colores ayuda aquí porque HSL te deja mantener el tono y mover solo la luminosidad y la saturación, y luego te da el código hex para pegar.
¿Los ratios de contraste del modo claro se mantienen?
No. La fórmula de WCAG es simétrica, así que los umbrales son los mismos en ambos temas: 4,5:1 para texto de cuerpo y 3:1 para texto grande y componentes de interfaz. Lo que cambia es cuáles de tus colores los alcanzan. Estos son cálculos reales contra #121212:
| Color del texto | Sobre blanco | Sobre #121212 |
|---|---|---|
#1D4ED8 (azul) | 6,70:1, pasa | 2,80:1, falla |
#93B4FF (azul más claro) | unos 2,1:1, falla | 9,11:1, pasa |
#DC2626 (rojo) | 4,83:1, pasa | 3,88:1, falla para texto de cuerpo |
#6B7280 (gris) | 4,83:1, pasa | 3,88:1, falla para texto de cuerpo |
El azul es la fila instructiva. Es un color de enlace perfectamente bueno en una página blanca e ilegible en la oscura, y su reemplazo más claro tiene el perfil opuesto. Ninguno está mal; pertenecen a temas distintos. El texto secundario suele ser la baja, ya que un gris apagado elegido para ser discreto sobre blanco a menudo es lo primero que cae por debajo de 4,5:1 cuando la página se oscurece.
Para probar un par, pega los dos valores hex en un verificador de contraste. Si el color del texto falla, su botón de ajuste mueve la luminosidad de tu color, manteniendo tono y saturación, hasta llegar a 4,5:1, y te dice el nuevo hex. Sobre un fondo oscuro lo aclara, que es la dirección que quieres. Los umbrales y lo que cuenta como texto grande están en qué relación de contraste necesitas para un texto legible.
¿Cómo se muestra la profundidad cuando las sombras no sirven?
Una sombra oscura sobre una página oscura es casi invisible, así que falta la forma habitual de decir que una superficie está por encima de otra. Un sustituto común es hacer las superficies elevadas algo más claras que la página: una tarjeta uno o dos pasos más clara que el fondo, un menú más claro que la tarjeta. Es una convención que usan muchos sistemas de diseño, no un estándar, y tiene un límite. Si apilas demasiados niveles, la superficie más clara empieza a parecer otro tema. Dos o tres pasos suelen bastar, y cada uno es un fondo más contra el que tu texto tiene que pasar.
Cada color de superficie multiplica los pares que debes revisar. Prueba tus colores de texto contra la superficie más oscura y la más clara en que van a estar, y si pasan en ambos extremos, pasan en el medio.
Qué pueden y qué no pueden hacer las herramientas de aquí
El verificador de contraste acepta solo códigos hex de seis o tres dígitos. No lee cadenas rgb(), hsl() ni oklch(), ignora la transparencia, así que un color de texto semitransparente hay que aplanarlo sobre su fondo antes de probarlo, e implementa WCAG 2, no APCA. Comprueba un par que tú le das. No genera un tema oscuro, y no te dice que un color se siente duro. El conversor de colores pasa un color sRGB entre HEX, RGB y HSL y nada más. Las dos corren completamente en tu navegador, y nada de lo que escribes se sube.
Qué formato usar para escribir tus tokens es otra pregunta, tratada en qué formato de color usar. La luminosidad de HSL no es brillo percibido, así que una luminosidad que funciona para un tono no funcionará para otro. Mide cada color.
Cuando tengas una paleta oscura, pasa cada par de texto y superficie por el verificador de contraste, y usa el conversor de colores para llevar un valor hex a HSL y de vuelta mientras lo ajustas. Las dos trabajan con los colores que pegas y los mantienen en tu navegador.
Si todavía decides cuántos colores necesita la paleta, cómo elegir una paleta de colores que funcione trata los neutros y los estados, en los que un tema oscuro se apoya más que uno claro.
Preguntas frecuentes
¿Debe el modo oscuro usar negro puro de fondo?
Normalmente funciona mejor un gris muy oscuro como #121212. El negro puro con texto blanco puro da el contraste máximo de 21:1, que a algunos lectores les resulta duro en tramos largos. El único argumento a favor del negro puro es que algunas pantallas OLED apagan los píxeles negros, que es un asunto de batería y no de legibilidad.
¿Por qué mis colores se ven demasiado brillantes en modo oscuro?
El mismo color saturado se ve más intenso rodeado de oscuridad que sobre blanco. La solución habitual es usar en el tema oscuro una versión más clara y menos saturada de cada acento, manteniendo el tono para que la marca siga siendo reconocible. Mide el resultado después, porque cambiar la luminosidad cambia la relación de contraste.
¿Las reglas de contraste de WCAG se aplican al modo oscuro?
Sí, con los mismos umbrales: 4,5:1 para texto de cuerpo y 3:1 para texto grande y componentes de interfaz. La fórmula es simétrica, así que intercambiar texto y fondo da la misma relación. Un color que pasa sobre fondo blanco puede fallar sobre uno oscuro, así que cada tema se revisa por separado.
¿Puedo simplemente invertir mi tema claro para obtener uno oscuro?
Da un punto de partida utilizable y un resultado pobre. La inversión da vuelta solo la luminosidad, así que los acentos de tono medio pierden contraste, los tintes pálidos se vuelven fondos casi negros que desaparecen y las sombras dejan de funcionar. Trata el tema oscuro como una segunda paleta con los mismos tonos y luminosidad y saturación elegidas de nuevo.
Última actualización 5 de octubre de 2026
