Contraste de color para mockups y presentaciones: cómo probarlo antes de enseñarlo
Un color que se ve bien en tu pantalla de diseñador puede volverse ilegible proyectado en una sala de reuniones o comprimido en una videollamada. Esta guía se centra en cómo usar la vista previa en directo del verificador de contraste de color de ToolPico mientras preparas slides, prototipos y pantallas de mockup — no en la teoría del ratio WCAG, que ya cubrimos en la guía anterior.
Qué hace la vista previa en directo, y su límite actual
Respuesta cortaAl elegir un par de colores, el verificador muestra al instante un titular, un párrafo de ejemplo y un botón renderizados con esos colores, para que veas el efecto real antes de copiarlos a tu diseño.
Esta vista previa es útil para una comprobación rápida de «¿se ve bien?» más allá del número del ratio. Pero el texto de la vista previa es un ejemplo fijo, no el titular real de tu diapositiva o de tu pantalla de producto. Como el ratio de contraste WCAG depende únicamente de los dos colores —y no de qué palabras concretas escribas ni de la tipografía—, el resultado numérico (aprueba/falla AA o AAA) es exactamente el mismo si usas el texto de ejemplo o tu propio titular con esos colores.
Idea para el futuro: un campo editable en el panel de vista previa donde pegar tu propio titular o frase de marca ayudaría a detectar de un vistazo, por ejemplo, si un titular corto y en mayúsculas «se ve» distinto a un párrafo largo con el mismo par de colores, aunque el ratio numérico no cambie. Hoy esto no está implementado en la herramienta; mientras tanto, confía en el ratio y el resultado AA/AAA mostrados, y usa la vista previa de ejemplo como referencia visual aproximada.
Contraste en diapositivas proyectadas y videollamadas
Respuesta cortaUn proyector con poca potencia, una sala muy iluminada o la compresión de una pantalla compartida en videollamada reducen el contraste percibido respecto a lo que ves en tu monitor, así que conviene dejar margen extra.
Supongamos, a modo de ejemplo ilustrativo, que preparas una diapositiva con texto gris medio sobre fondo blanco y el verificador te da un ratio de aproximadamente 4,6:1 — justo por encima del mínimo AA (4,5:1) para texto normal. En tu portátil se lee perfectamente. Pero en una sala con luz de ventana directa sobre la pantalla, o compartido por videollamada con compresión agresiva, ese mismo texto puede perder legibilidad porque el margen sobre el mínimo es casi nulo. Para titulares y texto clave de una presentación, es razonable apuntar a un ratio con más colchón — por ejemplo el umbral AAA (7:1) en vez de conformarte con pasar justo AA — precisamente porque no controlas las condiciones de visualización del público.
Lo mismo aplica a capturas de pantalla de tu producto que insertes en un mockup o en una landing: si el original ya raspa el mínimo de contraste, cualquier compresión JPEG o reducción de tamaño puede empujarlo por debajo del umbral en la práctica, aunque el archivo fuente lo cumpliera.
Botones, CTAs e imágenes de fondo en un mockup
Respuesta cortaPara un botón, compara el color de fondo del botón contra el color de su texto; para un botón con solo icono o borde, usa el umbral de 3:1 de componentes de interfaz en vez del umbral de texto.
Al maquetar un mockup de landing page o de app, el CTA principal suele ser el elemento donde más falla el contraste, porque el color de marca (a menudo vivo y saturado) se combina con blanco por defecto sin comprobarlo. Introduce el color de fondo del botón como fondo y el color del texto del botón como primer plano en el verificador; si el texto del botón es grande y en negrita, recuerda que el umbral AA baja a 3:1 en vez de 4,5:1.
Cuando el texto de tu mockup va sobre una foto, un vídeo de fondo o un degradado, el verificador solo puede comprobar un color sólido concreto. Un enfoque práctico: usa el cuentagotas de la herramienta sobre una captura de pantalla del mockup, en el punto más claro (o más oscuro) del área donde caerá el texto, y comprueba ese «peor caso». Si falla, añadir una capa de superposición semitransparente detrás del texto —y comprobar el color resultante con una entrada rgba() o hex de 8 dígitos— suele resolver el problema sin cambiar el color del texto en sí.
Prueba tus colores de mockup ahora
Vista previa en directo, ratio WCAG, AA/AAA, contraste APCA y simulación de daltonismo — todo gratis, en tu navegador.
¿Puedo probar el contraste con el texto exacto de mi diseño?
La vista previa en directo del verificador ya muestra un titular, un párrafo y un botón de ejemplo con tu par de colores elegido, para que veas el efecto real antes de aplicarlo. Escribir tu propio titular o frase exacta en ese recuadro de vista previa es una mejora pendiente de implementar; mientras tanto, la vista previa de ejemplo sirve como referencia fiable del mismo ratio de contraste, ya que el ratio no depende del texto en sí, solo de los dos colores.
¿Por qué el contraste importa tanto en slides y presentaciones como en una web?
En una presentación proyectada o compartida en videollamada, la luz ambiental, la resolución del proyector y la compresión de vídeo suelen reducir el contraste percibido respecto a lo que ves en tu propia pantalla. Por eso conviene apuntar a un ratio con margen (por ejemplo AAA en vez de justo AA) para titulares de diapositivas, especialmente en salas con mucha luz o pantallas compartidas de baja calidad.
¿Cómo compruebo el contraste de un botón o CTA en un mockup?
Introduce el color de fondo del botón como color de fondo y el color del texto del botón como color de primer plano; el verificador te da el ratio y el resultado AA/AAA para texto normal o grande según el tamaño de tu tipografía. Si el botón tiene un borde o icono en vez de texto, compara ese color contra el fondo adyacente usando el umbral de 3:1 para componentes de interfaz, que también se muestra en la tabla de resultados.
¿Debo comprobar el contraste sobre fondos con imagen o degradado?
Sí: cuando el texto va sobre una foto, un vídeo o un degradado, el verificador solo puede comprobar un color sólido concreto, así que conviene tomar el color más claro (o más oscuro) del área donde caerá el texto —por ejemplo con el cuentagotas, sobre una captura del mockup— y probar ese peor caso. Si el ratio falla en el punto más problemático de la imagen, suele ayudar añadir una capa de superposición semitransparente detrás del texto y comprobar el color resultante con la entrada rgba() o hex de 8 dígitos.
¿Cómo mantengo la coherencia de contraste entre varias diapositivas o pantallas de un mockup?
Una forma práctica es definir de antemano 2 o 3 pares de colores de marca que ya hayas verificado (por ejemplo texto oscuro sobre fondo claro, texto blanco sobre el color de marca, y texto sobre el color de acento) y reutilizar solo esos pares en todas las diapositivas o pantallas, en vez de improvisar un color nuevo en cada una. La pestaña de verificación de paleta del verificador permite comprobar de una vez hasta 4 colores de marca entre sí y detectar qué combinaciones fallan antes de aplicarlas.
Nota: los ratios de ejemplo mencionados en esta guía son ilustrativos para explicar el orden de magnitud, no una certificación de accesibilidad; comprueba siempre tus colores exactos con la herramienta. La simulación de daltonismo es una aproximación visual, no una herramienta de diagnóstico médico. El contenido es solo informativo.