El bajo contraste dificulta la lectura de las páginas de un flipbook en el teléfono, a la luz del sol y para lectores con baja visión. Este artículo explica cómo medir las proporciones de contraste, qué herramientas usar, qué valores alcanzar y cómo corregir las páginas débiles antes de publicar.
Pasaste horas en el diseño, elegiste una paleta acorde con tu marca y exportaste el PDF. Luego un compañero lo abre en el teléfono, afuera, y dice que los pies de foto grises no se ven. Eso es un problema de contraste, y es una de las razones más comunes por las que un buen flipbook pierde lectores. La solución toma minutos una vez que sabes cómo medirlo. Si publicas con Flipbooks AI, puedes hacer estas comprobaciones en tu PDF original antes de convertirlo, y otra vez en el flipbook publicado después.
Este artículo te explica paso a paso cómo comprobar el contraste de color en las páginas de un flipbook: qué significan los números, qué herramientas gratuitas usar, cómo probar texto sobre fotos y cómo reparar las páginas que no pasan.
El contraste es la diferencia de brillo entre el texto y el color que hay detrás. Un flipbook se lee en muchas más condiciones que un folleto impreso: en una laptop en una habitación con poca luz, en un teléfono bajo el sol directo, en una tableta con el brillo bajo para ahorrar batería. Cada una de esas condiciones resta algo de contraste, así que una página que se ve bien en tu monitor calibrado puede fallar en la vida real.
Un buen contraste ayuda de tres maneras:
💡 Si una página cuesta leer cuando la miras entornando los ojos desde la distancia de un brazo, costará leerla a una gran parte de tu público. Considera esa prueba de entornar los ojos como tu primera comprobación, y es gratuita.
WCAG expresa el contraste como una proporción que va de 1:1 (colores idénticos, sin contraste) a 21:1 (negro sobre blanco). La fórmula compara la luminancia relativa de los dos colores. Nunca necesitas calcularla a mano, pero sí conviene conocer los valores objetivo.
| Tipo de contenido | Mínimo WCAG AA | Objetivo WCAG AAA |
|---|---|---|
| Texto de cuerpo (menos de 18 pt) | 4,5:1 | 7:1 |
| Texto grande (18 pt, o 14 pt en negrita y más) | 3:1 | 4,5:1 |
| Iconos y partes de la interfaz (botones, enlaces) | 3:1 | 3:1 |
| Elementos decorativos, logotipos | Sin requisito | Sin requisito |
En la mayoría de los flipbooks, apunta a AA en todo y AAA en el texto de cuerpo. El texto de cuerpo es donde los lectores pasan su tiempo, así que merece el listón más alto.
El texto grande es de 18 pt (unos 24 píxeles) o de 14 pt en negrita (unos 18,5 píxeles). Los encabezados y las citas destacadas suelen cumplirlo. Los pies de foto, las notas al pie, las celdas de tablas y los números de página casi nunca lo cumplen, y son los elementos que más fallan.
Unos cuantos valores de referencia te ayudan a juzgar una paleta de un vistazo:
No necesitas software de pago. Estas opciones cubren todos los casos que vas a encontrar.
| Herramienta | Ideal para | Costo | Funciona con imágenes |
|---|---|---|---|
| WebAIM Contrast Checker | Pruebas rápidas de dos colores con códigos hexadecimales | Gratis | No |
| Colour Contrast Analyser (escritorio) | Tomar colores de cualquier parte de la pantalla | Gratis | Sí, con el cuentagotas |
| Selector de color de Chrome DevTools | Páginas de flipbook publicadas en el navegador | Gratis | Parcialmente |
| Plugins de Figma (Stark, A11y) | Revisar páginas antes de exportar | Planes gratuitos | Sí |
| Comprobador de accesibilidad de Adobe Acrobat | PDF originales | Incluido con Acrobat Pro | Limitado |
Colour Contrast Analyser es la más útil del grupo porque permite tomar el color del texto y del fondo directamente de la pantalla. Abre tu PDF o tu flipbook publicado, haz clic con el cuentagotas del primer plano sobre un carácter del texto, haz clic con el cuentagotas del fondo en el área que hay detrás y lee la proporción. También muestra si pasa o no en cada nivel de WCAG.
En un flipbook publicado, haz clic con el botón derecho sobre el texto, elige Inspeccionar y haz clic en la muestra de color del panel de estilos. Chrome y Edge muestran la proporción de contraste dentro del selector, junto con una línea que marca dónde caen los umbrales AA y AAA. Mueve el selector hasta que la proporción pase y anota el código hexadecimal resultante.
Usa esta rutina en cada flipbook, y mantenla lo bastante corta para que de verdad la hagas.
✅ Crea una hoja de paleta de una sola página para tu marca, con cada par de texto y fondo aprobado y su proporción. Así, las páginas nuevas heredan combinaciones ya probadas en lugar de empezar de cero.
Después de revisar muchos flipbooks, los mismos problemas aparecen una y otra vez.
A los diseñadores les encantan los pies de foto en gris suave porque se ven refinados. También tienden a quedar cerca de 2,5:1. Si pasas a un gris igual o más oscuro que #595959 sobre blanco, consigues un aprobado con 7:1.
Una foto no tiene un único color de fondo, así que una sola comprobación no basta. Consulta la siguiente sección para ver el enfoque correcto.
El azul sobre verde, el rojo sobre morado y el naranja sobre amarillo pueden verse vivos y aun así no pasar. El brillo importa más que el tono, así que compara la luminosidad, no los nombres de los colores.
Un grosor muy fino reduce el contraste efectivo, porque los trazos se difuminan contra el fondo. Si tu tipografía tiene un grosor regular o medio, úsalo para el texto de cuerpo.
Las portadas, los catálogos y las revistas suelen colocar titulares sobre fotografías. Así puedes mantenerlos legibles.
| Enfoque | Esfuerzo | Impacto visual | Fiabilidad |
|---|---|---|---|
| Degradado de superposición | Bajo | Moderado | Alta |
| Panel sólido para el texto | Bajo | Alto, un bloque claro | Muy alta |
| Mover el texto | Medio | Ninguno | Depende de la foto |
| Recortar de nuevo la foto | Medio | Puede mejorar la composición | Media |
⚠️ No te fíes de una comprobación en un solo píxel. Un titular que pasa en una zona oscura de la foto puede fallar en la zona clara que tiene al lado.
Los números te dicen el potencial, y los dispositivos te dicen la realidad. Haz una prueba rápida en dispositivos cuando las proporciones de contraste ya pasen.
Una prueba rápida con dos compañeros vale más que una hora de ajustes a solas, porque una mirada nueva detecta problemas que tú ya dejaste de ver.
Los problemas de contraste se ven distintos según el tipo de flipbook.
Flipbooks AI convierte tu PDF en un flipbook con efecto de paso de página, así que el lugar más fiable para corregir el contraste está en el archivo original. Este es el flujo que evita rehacer el trabajo.
💡 Flipbooks AI nunca añade marcas de agua, así que tus páginas conservan exactamente los colores que diseñaste. No hay ninguna superposición compitiendo con tu texto.
| Etapa | Qué revisar | Dónde |
|---|---|---|
| Archivo de diseño | Pares de texto y fondo | Figma, InDesign, Canva |
| PDF exportado | Que los colores se conservaron al exportar | Colour Contrast Analyser |
| Flipbook publicado | Fondo del visor, barra de herramientas, enlaces | Chrome DevTools |
| Dispositivos reales | Sol, brillo bajo | Teléfono y tableta |
Imprímela y pégala junto a tu monitor.
Comprobar el contraste es un hábito de diez minutos con un beneficio enorme: más lectores terminan tus páginas, más personas pueden usarlas y tu marca se ve cuidada en lugar de descuidada. Empieza por la hoja de paleta, prueba los pares que importan y revisa la versión publicada.
¿Listo para publicar? Empieza gratis en Flipbooks AI, explora todas las herramientas de flipbook para encontrar la plantilla adecuada y compara los planes para elegir las funciones que se ajusten a tu proyecto.
Elige tu idioma
