Verificar una captura cuya fuente no tienes — landing de marketing, UI de competencia, PDF. Auditar un logo sobre un fondo fotográfico movido donde el "color de fondo" no es un solo valor. Comprobar el peor caso de contraste a lo largo de un gradiente o tras texto traslúcido. Comparar rápido dos estados UI (p. ej. botón en reposo vs hover) sin rehacer el diseño.

Anti-aliasing. Los bordes de texto promedian a colores fuera del design intent. Haz clic en medio del trazo de una letra, no en su borde. Compresión JPEG. Las imágenes muy comprimidas tienen drift de color en zonas planas. El promedio 5×5 lo suaviza. Capas traslúcidas. Lo que cuenta para el contraste es el píxel renderizado, no el color fuente. Esta herramienta lee el renderizado — exactamente lo que quieres. Compruebas colores, no design intent. Si tu botón pasa AA en reposo pero falla en hover en otra captura, ambos estados son fallos a11y. Escalado de imagen. La herramienta escala imágenes grandes para performance. El píxel muestreado refleja el píxel mostrado; si necesitas sampling píxel-a-píxel de un elemento muy pequeño, recorta antes de subir.

Verificador de contraste sobre imagen

Haz clic en cualquier par de puntos de una imagen para comprobar el contraste WCAG — AA, AAA, umbrales de texto grande. Pensado para diseñadores que verifican capturas reales, no solo códigos hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Resultado

Sample two colours to see the contrast ratio.

¿Para qué sirve?

Los verificadores de contraste WCAG normalmente piden dos códigos hex — pero un diseñador haciendo un pase de accesibilidad sobre una captura real no tiene hex, tiene píxeles. Esta herramienta te deja subir una imagen (captura, diseño hero, logo sobre fondo movido) y hacer clic en dos puntos. Muestrea el color bajo el cursor (1 píxel o promedio 3×3/5×5) y calcula la razón de contraste WCAG 2.1. Veredicto para AA, AA-grande, AAA, AAA-grande y umbral de componentes UI (1.4.11). Todo en el navegador.

Cuándo usarlo

Verificar una captura cuya fuente no tienes — landing de marketing, UI de competencia, PDF.
Auditar un logo sobre un fondo fotográfico movido donde el "color de fondo" no es un solo valor.
Comprobar el peor caso de contraste a lo largo de un gradiente o tras texto traslúcido.
Comparar rápido dos estados UI (p. ej. botón en reposo vs hover) sin rehacer el diseño.

Cómo funciona el muestreo

Muestrear 1 píxel es preciso pero ruidoso — los bordes con anti-alias, los artefactos JPEG y el subpíxel hacen que vecinos difieran. El promedio 5×5 suele ser lo que quieres en UI: devuelve el color que un humano describiría, no el píxel exacto bajo el clic. Usa 1px para un borde de logo o una frontera de color nítida.

Errores comunes

Anti-aliasing. Los bordes de texto promedian a colores fuera del design intent. Haz clic en medio del trazo de una letra, no en su borde.
Compresión JPEG. Las imágenes muy comprimidas tienen drift de color en zonas planas. El promedio 5×5 lo suaviza.
Capas traslúcidas. Lo que cuenta para el contraste es el píxel renderizado, no el color fuente. Esta herramienta lee el renderizado — exactamente lo que quieres.
Compruebas colores, no design intent. Si tu botón pasa AA en reposo pero falla en hover en otra captura, ambos estados son fallos a11y.
Escalado de imagen. La herramienta escala imágenes grandes para performance. El píxel muestreado refleja el píxel mostrado; si necesitas sampling píxel-a-píxel de un elemento muy pequeño, recorta antes de subir.