Guía completa de accesibilidad para modo oscuro y alto contraste: diseño de color, validación de contraste, respeto de ajustes del SO, iconos/imágenes y visibilidad del foco (WCAG 2.1 AA)
Resumen ejecutivo (puntos clave primero)
- El modo oscuro no es solo “estético”: es una función importante de accesibilidad para reducir el deslumbramiento, disminuir la fatiga y apoyar a personas con sensibilidad a la luz.
- Pero con fondos oscuros, un contraste insuficiente puede volver el contenido ilegible al instante. Las claves son (1) contraste de texto, (2) no depender solo del color para el significado, (3) 3:1 para elementos no textuales (bordes/iconos/foco), y (4) representación consistente de estados en ambos temas.
- Respeta los ajustes a nivel del sistema operativo (
prefers-color-scheme/prefers-contrast) y evita sobreescribir el entorno elegido por la persona usuaria.- Imágenes, iconos y gráficos son lo que más suele “romperse” entre temas. Usa SVG con
currentColor, assets dobles, placas de fondo y contornos como contramedidas.- Este artículo incluye ejemplos listos de tokens de color, plantillas CSS, una checklist y una prueba rápida de 5 minutos.
Lectores previstos (específico): diseñadores UI/UX, ingenieros front-end, responsables de design systems, equipos de PR/edición (cualquiera que gestione imágenes), QA/testers, constructores de apps SaaS/enterprise
Objetivo de accesibilidad: cumplimiento WCAG 2.1 AA (relacionado: 1.4.3, 1.4.11, 1.4.1, 2.4.7, 2.1.1, etc.)
1. Introducción: el modo oscuro amplía las “opciones de legibilidad”
Una UI oscura funciona bien de noche y en entornos con poca luz al reducir el deslumbramiento. Para personas sensibles a la luz, propensas a migrañas, o que simplemente encuentran dolorosos los fondos blancos cuando están fatigadas, el modo oscuro puede ser de gran ayuda.
Por otro lado, UIs oscuras “primero vibras”—iconos finos, bordes pálidos, texto gris de bajo contraste sobre negro—suelen provocar fallos: texto ilegible, affordances poco claras y estados invisibles.
Para que el modo oscuro sea accesible, no basta con invertir el fondo. Hay que rediseñar el tema alrededor de contraste, significado más allá del color, expresión de estados y visibilidad del foco. Esta guía explica pasos prácticos para una implementación real.
2. Principios centrales: llevar a las personas a la “misma comprensión” en oscuro y claro
2.1 Contraste de texto (1.4.3)
- Texto normal: 4.5:1 o más
- Texto grande: 3:1 o más
En fondos oscuros, el texto blanco puro (#FFFFFF) suele cumplir contraste, pero también puede sentirse duro o deslumbrante. En la práctica, usar un blanco suavizado para texto de cuerpo (p. ej., #E9ECF1) y aumentar levemente el interlineado puede reducir la fatiga visual.
2.2 Contraste no textual (1.4.11)
Elementos como:
- Bordes de botones
- Contornos de inputs
- Iconos
- Anillos de foco
deberían ser, por lo general, 3:1 o más. Bordes “casi invisibles” que solo parecen verse son arriesgados.
2.3 No usar el color como único medio para transmitir significado (1.4.1)
En modo oscuro, las diferencias de color pueden ser más difíciles de percibir. Evita patrones como:
- Error = solo rojo
- Seleccionado = solo azul
En su lugar, superpone significado usando iconos, texto en negrita, subrayados y forma.
3. Respeta los ajustes del SO: prefers-color-scheme y prefers-contrast
3.1 prefers-color-scheme (claro/oscuro)
:root{
--bg:#ffffff;
--fg:#222222;
--muted:#555;
--border:#c9d1d9;
--link:#0b63f6;
--focus:#ff9900;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0f1115;
--fg:#e9ecf1;
--muted:#a9b3c1;
--border:#273142;
--link:#58a6ff;
--focus:#ffb020;
}
}
body{ background:var(--bg); color:var(--fg); }
a{ color:var(--link); text-decoration: underline; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
3.2 prefers-contrast (alto contraste)
Para quienes habilitan alto contraste, un foco y bordes más fuertes suelen ser tranquilizadores.
@media (prefers-contrast: more){
:root{
--border:#ffffff;
}
a{ text-decoration-thickness: .14em; }
:focus-visible{ outline-width:4px; }
}
3.3 No sobreescribas la elección de la persona usuaria
Aunque ofrezcas un toggle a nivel del sitio (claro/oscuro), no fuerces un tema que ignore ajustes del SO. Una buena práctica común:
- Primera visita: seguir al SO
- Después de que el usuario cambie: guardar preferencia explícita
4. Diseño del sistema de color: evita roturas con tokens (amigable para design systems)
La razón más común por la que el modo oscuro se rompe es la “proliferación de colores hardcodeados”—valores copiados por todas partes y estados inconsistentes.
Así que: tokeniza colores por propósito, no por hex arbitrarios.
4.1 Set mínimo de tokens (ejemplo)
- Fondo:
--bg/--surface - Texto:
--fg/--muted - Bordes:
--border - Links:
--link - Estados:
--danger/--success/--warning - Foco:
--focus
4.2 Diseña colores de estado como “pares con el fondo”
El rojo de error puede verse apagado sobre superficies oscuras—o dolorosamente saturado. Valida colores de estado en combinación con:
- Sobre superficies (como fill)
- Como texto
- Como bordes/contornos
Revísalos como un conjunto.
5. Links, botones, formularios: fallos típicos en modo oscuro y cómo corregirlos
5.1 Links: usar color + subrayado
En fondos oscuros, el color del link puede confundirse con el texto. El subrayado es la “última línea de defensa”.
a{ text-decoration: underline; text-underline-offset:.2em; }
a:hover, a:focus-visible{ text-decoration-thickness:.14em; }
5.2 Botones: hacer explícitos bordes y estados de presionado
- No depender solo de sombras
- Mostrar hover/focus/active con cambio de luminancia + contorno/borde
5.3 Inputs: borde 3:1 y placeholders
- Placeholders suelen quedar demasiado tenues—mantén etiquetas visibles
- Distingue claramente superficie del input y borde
- Para errores: no uses solo color—añade icono + texto
6. Imágenes, iconos, gráficos: cómo manejar lo más frágil entre temas
6.1 Usar SVG con currentColor
Iconos que siguen el color de texto sobreviven bien a cambios de tema.
<svg aria-hidden="true" width="20" height="20" fill="currentColor">…</svg>
6.2 “El negro desaparece” en modo oscuro
Casos comunes:
- Logos en negro puro
- Diagramas solo con líneas negras
Contramedidas:
- Proveer logo para modo oscuro
- Añadir contornos/strokes
- Colocar imágenes sobre una “placa de fondo” sutil (tarjeta clara)
6.3 Gráficos: codificar significado más allá del color
El modo oscuro puede reducir discriminabilidad del color. Refuerza con:
- Estilos de línea (sólida/discontinua)
- Formas de marcadores (●▲◆)
- Etiquetas cerca de las líneas
7. Visibilidad del foco: protege el indicador de “estás aquí” que se pierde en UIs oscuras
Elegir el color del anillo de foco es más difícil en fondos oscuros. Usa:
- Contraste de luminancia suficiente vs. fondo
- Visibilidad incluso sobre imágenes o bloques de color
- Grosor no demasiado fino (3px o más)
Tokenízalo para mantener consistencia.
:focus-visible{
outline:3px solid var(--focus);
outline-offset:3px;
}
8. Modos de alto contraste (Windows, etc.) y colores forzados
Cuando el SO reemplaza colores forzosamente, tu paleta puede colapsar. La mejor defensa:
- No depender de color de fondo como única señal importante
- Proveer señales no basadas en color: subrayados, bordes, formas de iconos
Nota: SVG/iconos pueden desaparecer en modos de color forzado; por eso, acompaña iconos críticos con etiquetas de texto.
9. Prueba rápida de 5 minutos: verificación mínima para modo oscuro
- Texto del body, links y etiquetas de botones son legibles (apunta a ~4.5:1)
- Bordes, iconos y anillos de foco son visibles (apunta a ~3:1)
- Links se identifican por subrayado, no solo por color
- El foco es visible en claro y oscuro
- Estados de error/éxito/selección no son solo color
- Logos e imágenes clave no se “pierden” en el fondo
- Gráficos no son solo color
- Ajustes del SO (
prefers-color-scheme/contrast) se comportan como se espera - Sin roturas a 200% de zoom (reflow)
10. Valor para audiencias específicas (concreto)
- Personas con sensibilidad a la luz o migrañas: menos deslumbramiento permite uso más prolongado.
- Personas con baja visión y quienes usan zoom: alto contraste + límites claros estabilizan el reconocimiento.
- Diversidad de visión del color: codificación no basada solo en color mantiene el significado.
- Usuarios de teclado: foco siempre visible reduce “perderse”.
- Equipos de operaciones: tokenización reduce regresiones y preserva calidad con actualizaciones.
11. Conclusión: guía a las personas a la “misma comprensión”, incluso en pantallas oscuras
- El modo oscuro es una opción de accesibilidad para reducir deslumbramiento—prioriza legibilidad sobre estética.
- Valida contraste por tema: ~4.5:1 para texto, ~3:1 para no texto.
- Respeta preferencias del SO (
prefers-color-scheme/contrast) y no sobreescribas elecciones del usuario. - Usa tokens para estandarizar paleta, estados y foco y evitar roturas.
- Protege imágenes/iconos/gráficos con
currentColor, contornos, placas y codificación redundante. - Ejecuta la prueba rápida de 5 minutos para mantener legibilidad y reconocimiento tras cambios.
La amabilidad del modo oscuro está en ser elegible.
Haz que esa elección entregue el mismo significado a todas las personas—con colores calmados y contraste confiable.