Paleta de colores para modo oscuro
Diseña un tema oscuro con funciones claras para cada color: fondo, superficie elevada, texto y acento. Empieza con el ejemplo CSS y comprueba las combinaciones que vas a utilizar.
Esta guía explica el flujo de trabajo. Usa la herramienta principal enlazada abajo para generar colores y exportar archivos.
Asigna una función a cada color
Un tema oscuro necesita su propia jerarquía. Distingue el fondo de las superficies elevadas y comprueba el texto y los controles sobre ambos. Conserva el significado de los estados y permite elegir el tema.
Una paleta oscura lista para probar en CSS
Resumen del proyecto
La superficie elevada separa este contenido del fondo. El texto principal, el secundario y la acción tienen colores propios.
Comprobar los colores de la acción:root[data-theme="dark"] {
--canvas: #111827;
--surface: #1F2937;
--text: #F9FAFB;
--text-secondary: #9CA3AF;
--accent: #93C5FD;
--on-accent: #111827;
}
body { background: var(--canvas); color: var(--text); }
.panel { background: var(--surface); }
.panel p { color: var(--text-secondary); }
.action { background: var(--accent); color: var(--on-accent); }Esta paleta es un punto de partida, no una certificación de toda la interfaz. El ejemplo define el texto y el fondo para que puedas reproducir las comprobaciones.
Comprueba estas parejas de texto y fondo
En WCAG AA, el texto de tamaño normal suele necesitar 4.5:1 y el texto grande 3:1. Los gráficos significativos y la información visual necesaria para reconocer controles suelen necesitar 3:1 respecto a los colores adyacentes. Los separadores decorativos no están sujetos automáticamente al mismo requisito.
Adapta la paleta a tu interfaz
- Genera tonos desde #93C5FD y compara los estados al pasar el cursor y al recibir el foco.
- Utiliza superficies más claras para separar secciones cuando resulte útil. El modo oscuro no exige negro puro ni prohíbe blanco puro.
- Comprueba el texto, los enlaces y los límites necesarios para reconocer los controles sobre sus fondos reales. Repite la prueba si cambias colores o transparencias.
- Revisa la página en distintos tamaños y con las preferencias de tema del usuario. Añade etiquetas u otras señales a los colores de estado.
¿Puedo invertir los colores de un tema claro?
La inversión puede alterar el significado de los estados y producir acentos poco legibles. Elige los colores por su función, conserva su significado y mide cada combinación real.
¿Está prohibido el texto blanco puro?
No. WCAG no prohíbe el texto blanco ni el fondo negro. Elige una combinación adecuada para el contenido y permite utilizar el tema preferido. La comodidad de lectura no se resume en el contraste.
¿Un contraste alto hace accesible todo el tema?
No. La prueba de contraste evalúa parejas de colores, no la navegación con teclado, las etiquetas, la visibilidad del foco ni el resto de la interfaz. Revisa también el producto completo.