Una tarjeta que se lee muy bien en un fondo blanco puede volverse ilegible en modo oscuro: el texto gris claro desaparece, un cuadro blanco de logotipo aparece de repente como un bloque, y una imagen oscura se funde con el fondo. Esta herramienta te permite detectar eso antes de publicar. Escribe el título, la descripción y la dirección de imagen de tu tarjeta, y muestra seis tarjetas simuladas: versiones claras y oscuras al estilo de Discord, Slack y X. Dilo claramente: son representaciones simuladas creadas para coincidir con los colores y el diseño de cada plataforma, no los renderizadores reales de las plataformas, así que úsalas para detectar problemas de contraste y recorte, y luego confirma en las aplicaciones reales.
Qué se rompe en el modo oscuro
El fallo más habitual es el contraste: los colores de texto elegidos para fondos blancos, como el gris medio para descripciones, caen por debajo del contraste legible en gris oscuro. El segundo es el borde de la imagen: una imagen de tarjeta con fondo blanco se ve bien en una tarjeta clara pero aparece como un rectángulo blanco deslumbrante en una tarjeta oscura. El tercero es el recorte: los títulos se cortan a unos 70 caracteres y las descripciones a unos 200, así que un título que cabe en escritorio puede perder su final en un teléfono. Esta herramienta aplica los mismos cortes para que veas el corte antes que tus lectores.
Cómo corregir lo que encuentres
Si el texto de la descripción se ve desvaído en la simulación oscura, oscurece el color de descripción propio de la página o acórtalo para que las palabras clave sobrevivan. Si tu imagen tiene fondo blanco, exporta una versión con fondo transparente o a juego con el oscuro, o añade un borde fino para que el borde se lea deliberado en lugar de accidental. Si el título se recorta, adelanta la promesa: los primeros 40 caracteres llevan el clic, y cualquier cosa después de 70 es un extra, no una garantía.
Por qué las simulaciones siguen siendo útiles
Existen validadores reales de plataformas, pero cada uno revisa una red a la vez y varios necesitan primero una URL publicada. Una simulación te permite comparar las seis presentaciones lado a lado mientras la tarjeta aún es un borrador, que es cuando las correcciones son baratas. La simulación no puede reproducir cada detalle: la presentación de fuentes, el recorte de imágenes y la gestión de enlaces difieren en las aplicaciones reales. Toma una simulación limpia como luz verde para publicar y comprobar, no como prueba de que la tarjeta real es perfecta.
Privacidad
Todo funciona en tu navegador. La dirección de imagen que escribes solo se usa para mostrar la imagen en las simulaciones en tu propia pantalla; nada se sube ni se guarda.
Probar en dispositivos reales antes de confiar en la simulación
Las simulaciones detectan los problemas obvios, pero los dispositivos reales aún sorprenden. Las pantallas OLED de teléfono muestran negro verdadero, lo que hace que las tarjetas oscuras se vean más oscuras que en un monitor de ordenador, mientras que las pantallas LCD antiguas aclaran los grises oscuros hacia el gris claro y pueden rescatar texto que la simulación marcó, o exponer texto que la simulación aprobó. Revisa la tarjeta en un teléfono con el sistema en modo oscuro y en un ordenador con la aplicación en modo oscuro, porque los ajustes del sistema y los de la aplicación no siempre coinciden. Las actualizaciones de aplicaciones también cambian las paletas sin aviso: un gris que pasaba el mes pasado puede fallar después de que una actualización oscurezca el fondo un tono. Guarda una captura de una tarjeta buena conocida en tu teléfono, y cuando una aplicación se actualice, compara la nueva presentación con ella antes de asumir que algo se rompió. El hábito cuesta un minuto y detecta la deriva lenta que ninguna comprobación única, simulada o real, puede detectar por sí sola.
Herramientas relacionadas
Generador de Vista Previa Social · Optimizador de Relación de Aspecto · English version: Dark Mode Preview Validator · Herramientas Gratis en Español.
Inserta esta herramienta en tu web — gratis
Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.