Comprobador de Contraste de Texto sobre Imágenes Gratis – Texto Legible sobre Fotos

By /

Comprobador de contraste gratis: haz clic en cualquier punto de tu foto, elige un color de texto y obtén la relación de contraste WCAG exacta con veredictos AA y AAA.

Texto blanco sobre un cielo brillante. Texto amarillo sobre un atardecer. Un título sobre una calle concurrida. El texto sobre fotos se ve precioso cuando funciona, e ilegible cuando no. La diferencia es el contraste: la diferencia medida de brillo entre el texto y el fondo detrás de él. Nuestro comprobador de contraste de texto sobre imágenes gratis mide esa diferencia como se debe. Sube una foto, haz clic justo donde irá tu texto, elige un color de texto y obtén la relación de contraste WCAG exacta más un veredicto claro de aprobado o no.

La herramienta funciona por completo en tu navegador. Tu imagen nunca sale de tu dispositivo. Muestrea los píxeles reales detrás de tu texto, no una suposición, así que el número que obtienes refleja la foto real que planeas usar.

Qué significa la relación de contraste

Las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG, definen el contraste como una relación de 1:1 a 21:1. Una relación de 1:1 significa que el texto y el fondo son idénticos: invisible. Una de 21:1 significa negro sobre blanco: el máximo posible. Para texto de tamaño normal, WCAG exige al menos 4,5:1 para el nivel AA, el estándar al que apunta la mayoría de las organizaciones. Para texto grande, basta con 3:1 en AA. El nivel AAA, más estricto, exige 7:1 para texto normal y 4,5:1 para texto grande. Nuestra herramienta te muestra la relación y te dice qué niveles pasas, sin adivinar.

¿Por qué importan estos números? Porque el texto con poco contraste excluye a personas. Los lectores mayores, las personas con baja visión y cualquiera que lea en el teléfono bajo el sol tienen dificultades con texto que apenas destaca de su fondo. Incluso las personas con visión perfecta leen el texto de poco contraste más despacio y con más errores. El contraste no es un detalle de diseño. Decide si tu mensaje se lee o no.

Por qué las fotos son más difíciles que los fondos lisos

Sobre un fondo sólido, el contraste es un número y nunca cambia. Sobre una foto, el fondo cambia por toda la imagen: cielo brillante arriba, árboles oscuros abajo, un rostro en el medio. Un color de texto que pasa con facilidad sobre la parte oscura puede fallar por completo sobre la parte brillante. Por eso importa muestrear el punto exacto.

Nuestro comprobador muestrea la zona donde haces clic, con un tamaño que controlas. Haz clic justo donde irá el titular y la herramienta promedia los píxeles de esa zona y calcula la relación con tu color de texto. Mueve el clic a otro punto y el veredicto se actualiza. Así encuentras el único lugar de la foto donde tu texto realmente funciona, o descubres que ningún lugar funciona y necesitas otro enfoque.

Cómo se usa el comprobador

Sube tu foto. Haz clic en la imagen donde irá tu texto. La herramienta dibuja un cuadro alrededor de la zona muestreada para que veas exactamente qué se midió. Elige tu color de texto con el selector de color. El resultado muestra la relación de contraste, el color de fondo muestreado y un veredicto: pasa AAA, pasa AA, solo pasa para texto grande, o no pasa. Cambia el tamaño de la muestra si tu texto cubre una zona mayor: un titular que abarca una banda ancha necesita una muestra mayor que un pie de foto corto.

Prueba varios puntos y varios colores. El texto blanco suele pasar sobre zonas oscuras y fallar sobre zonas brillantes. El texto negro hace lo contrario. A veces ninguno pasa, lo que nos lleva a las soluciones de abajo.

Cómo arreglar un texto que no pasa

La solución más fiable es un tratamiento del fondo: una capa oscura semitransparente detrás del texto, una banda sólida o una sombra suave. Los diseñadores lo llaman velo, y por eso los carteles de cine ponen títulos blancos sobre una franja oscurecida de la imagen. Un velo sube el contraste en todas partes a la vez, así que tu texto pasa sin importar dónde se coloque. Otra solución es elegir un punto de la foto naturalmente oscuro o naturalmente claro y mantener el texto allí.

También considera el peso y el tamaño de la fuente. El texto más grande y en negrita necesita menos contraste: por eso el listón WCAG para texto grande es más bajo. Nunca aceptes un fallo para el texto del cuerpo: si la gente no puede leerlo, el diseño no cumplió su función.

Quién usa la revisión de contraste

Los creadores de redes sociales revisan subtítulos y gráficos con citas antes de publicar. Los diseñadores web revisan imágenes principales con titulares superpuestos. Los creadores de presentaciones revisan diapositivas de título. Los anunciantes revisan el texto de anuncios sobre fotos de productos, donde un titular fallido significa dinero perdido. Cualquiera que ponga palabras sobre imágenes se beneficia de un número en vez de una sensación.

Preguntas frecuentes

¿Qué relación debo buscar? Al menos 4,5:1 para texto normal, 7:1 si quieres el nivel AAA más estricto.

¿La herramienta guarda mi foto? No. Todo ocurre en tu navegador. Tu imagen nunca sale de tu dispositivo.

¿Por qué cambia el veredicto cuando hago clic en otro sitio? Porque el fondo cambia. Ese es justo el punto: el contraste es local, no global, en una foto.

Sube tu foto, haz clic donde va el texto y obtén un número real.

Herramientas relacionadas

1 thought on “Comprobador de Contraste de Texto sobre Imágenes Gratis – Texto Legible sobre Fotos”

  1. Pingback: Text on Image Contrast Checker - Check Readable Text over Photos

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top