Hasta ahora, la vista previa en directo del verificador mostraba siempre el mismo titular de ejemplo («¿Se puede leer este texto?») y un párrafo genérico con el ratio de contraste calculado. Servía para hacerse una idea general, pero el titular real de tu web, el texto de tu botón de compra o la frase de tu diapositiva casi nunca coincidían con ese texto de muestra. La novedad soluciona justamente eso: cada uno de los tres campos —título, párrafo y botón— tiene su propio recuadro de entrada, y en cuanto escribes en cualquiera de ellos, el texto correspondiente en la superficie de vista previa (con tus colores de primer plano y de fondo elegidos) cambia al momento, sin pulsar de nuevo Calcular.
Detalle práctico: el campo de párrafo está marcado como opcional. Si lo dejas en blanco, la vista previa sigue mostrando el resumen automático con el ratio calculado; en cuanto escribes algo ahí, tu texto sustituye a ese resumen. El título y el botón, en cambio, siempre muestran lo último que hayas escrito (o el texto de ejemplo por defecto si no has tocado el campo).
Cómo usarla paso a paso
Respuesta cortaCalcula un contraste como siempre; el recuadro de personalización aparece automáticamente bajo la vista previa, con los tres campos listos para editar.
El flujo es sencillo: introduce tu color de texto y tu color de fondo, pulsa Calcular como de costumbre, y desplázate hasta la vista previa en directo. Justo debajo aparece el recuadro «Personaliza el texto de la vista previa» con tres campos de una línea:
| Campo | Qué controla | Si lo dejas vacío |
|---|
| Título grande | La línea grande y en negrita de la vista previa | Usa el texto de ejemplo por defecto |
| Texto de párrafo | El párrafo normal debajo del título | Muestra el resumen automático con el ratio |
| Texto del botón | La etiqueta del botón de ejemplo con borde | Usa «Botón de ejemplo» por defecto |
Por ejemplo, si estás decidiendo el color de un aviso de error para una tienda online, podrías escribir en el campo de título algo como «Stock agotado» (texto de ejemplo, no un dato real) y en el párrafo una frase como «Este producto no está disponible actualmente en tu talla», para ver exactamente ese mensaje —con tus propias palabras— renderizado con el par de colores que estás evaluando, en vez de un titular genérico que no representa tu caso real. Si después cambias el color de texto o de fondo y vuelves a pulsar Calcular, el título y el párrafo que escribiste se mantienen; solo cambian los colores de la superficie.
Casos de uso: botones, titulares y avisos
Respuesta cortaLa utilidad principal es comprobar el aspecto real de tu contenido —no de un texto de muestra genérico— antes de aplicar un color a producción.
Algunos escenarios donde este campo editable ayuda más que la vista previa genérica anterior:
- Botón de llamada a la acción: escribe el texto exacto de tu botón (por ejemplo, un texto corto como «Comprar ahora» a modo de ejemplo) en el campo de botón, para juzgar de un vistazo si el peso visual y la longitud del texto real —no de un marcador de posición— siguen leyéndose bien con ese color de fondo.
- Titular de campaña o landing: pega tu titular real, que normalmente es más largo o más corto que el texto de ejemplo genérico, y observa cómo se ajusta al ancho de la superficie de vista previa con el mismo par de colores.
- Mensaje de error o de éxito: como en el ejemplo anterior, escribe el mensaje exacto (ilustrativo) que mostrará tu interfaz —«Stock agotado», «Pago confirmado»— para comprobar el efecto visual real de ese texto concreto, no de una frase neutra que no se parece al contenido final.
Conviene recordar que el número de contraste (el ratio WCAG, el resultado AA/AAA y la puntuación APCA que se muestran junto a la vista previa) no depende del texto que escribas en estos campos: se calcula únicamente a partir de los dos colores elegidos. Cambiar el título, el párrafo o el botón solo cambia lo que ves en el recuadro de ejemplo, para que la comprobación visual case con tu contenido real; la cifra de contraste en sí permanece exactamente igual la escribas o no.
Prueba la vista previa personalizada ahora
Escribe tu propio titular, párrafo o texto de botón y compruébalo junto al ratio WCAG, AA/AAA, contraste APCA y simulación de daltonismo — todo gratis, en tu navegador.
Usar la herramienta →
Preguntas frecuentes
¿Qué ha cambiado exactamente en la vista previa en directo?
Debajo de la vista previa en directo ha aparecido un nuevo recuadro «Personaliza el texto de la vista previa» con tres campos: título grande, texto de párrafo y texto del botón. Al escribir en cualquiera de los tres, el texto de la superficie de vista previa (con tus colores de primer plano y de fondo elegidos) se actualiza al instante, sin volver a pulsar Calcular.
¿El campo de párrafo es obligatorio?
No. El campo de texto de párrafo está marcado como opcional: si lo dejas vacío, la vista previa sigue mostrando el resumen automático generado por la herramienta (que incluye el ratio de contraste calculado). Solo cuando escribes algo en ese campo, tu propio texto sustituye al resumen automático en la superficie de vista previa.
¿Se pierde mi texto personalizado si cambio los colores?
No. El título, el párrafo y el botón personalizados se mantienen aunque cambies el color de texto o de fondo y vuelvas a pulsar Calcular; solo cambian los colores de fondo y de texto de la superficie de vista previa, mientras que tu título, párrafo y texto de botón permanecen tal como los escribiste, hasta que decidas editarlos de nuevo.
¿Esta personalización afecta al ratio de contraste calculado?
No. El ratio de contraste WCAG, el resultado AA/AAA y la puntuación APCA se calculan a partir de los dos colores elegidos, no del texto que se muestra. Cambiar el título, el párrafo o el botón de la vista previa solo afecta a lo que ves en el recuadro de ejemplo; el número de contraste permanece exactamente igual.
¿Puedo usar esta vista previa personalizada para el texto de un botón o de un titular real de mi web?
Sí, esa es precisamente la utilidad de la novedad: escribe el titular exacto de tu landing, el texto real de tu botón de compra, o la frase de tu diapositiva en los campos correspondientes, y comprueba de un vistazo cómo se leerá con el par de colores elegido, en vez de imaginarlo a partir de un texto de ejemplo genérico.
Guías relacionadas
Nota: los ejemplos de texto de esta guía (títulos, mensajes de botón o de error) son ilustrativos para explicar el uso del campo, no datos reales de ningún proyecto. El ratio de contraste y el resultado AA/AAA se calculan siempre a partir de los colores elegidos, no del texto de la vista previa. El contenido es solo informativo — comprueba siempre tus propios colores y textos con la herramienta.