English
Español
Português
Français
Deutsch
Italiano
Türkçe
Bahasa IndonesiaContraste comprobador
Comprueba si tu combinación de texto y fondo es accesible. Elige colores a mano con las ventanas de color, usa los ajustes Blanco / Negro o sube una imagen y pulsa cualquier píxel. Notas WCAG AA y AAA al instante.
Suelta tu imagen aquí
o haz clic para explorar, arrastrar y soltar o pegar también funciona
Solo URL directas de imagen, deben terminar en .jpg, .png, .gif, .webp o .svg
Haz clic en la imagen o la paleta para definir como Texto
Relación de contraste
5.20 : 1
Buen contraste
Calificaciones WCAG
El rápido zorro marrón salta sobre el perro perezoso, texto normal 16px.
Texto grande 24px negrita
Cargando imagen...
¿Qué es comprobar el contraste?
Texto legible para todos
La proporción de contraste mide qué tan distinguible es el texto de su fondo, de 1:1 (mismo color) a 21:1 (negro sobre blanco). Nuestro comprobador usa la fórmula WCAG de luminancia relativa, el mismo estándar que usan auditores y sistemas de diseño.
Apunta al menos a 4.5:1 para texto normal (AA), 3:1 para texto grande y 7:1 para AAA. Prueba tus colores de marca, estilos de botones o cualquier texto sobre imagen antes de publicar.
Cómo usar
01
Elige colores
Escribe HEX, usa la ventana de color nativa o pulsa los ajustes Blanco / Negro / Aleatorio. Cambia cuando quieras.
02
O elige desde imagen
Pulsa el icono de imagen, sube cualquier JPG/PNG/WebP y pulsa la imagen o su paleta extraída. Cambia el objetivo Texto / Fondo.
03
Publica UI accesible
Lee la proporción, las notas AA/AAA y la vista previa en vivo.
04
Comparte y exporta
Copia la URL (?text=…&bg=…) para compartir el par exacto, Copia CSS para entregarlo o Descarga el informe TXT.
Ejemplos de la vida real
Texto base 16px: #767676 sobre #FFFFFF (4.54:1 aprobado) vs #999999 (2.85:1 fallido)
La comprobación real número 1. El texto gris secundario se ve limpio pero los grises claros fallan. Prueba ambos pares: oscurece el texto apagado a #767676 o #595959 para pasar AA. El texto largo pequeño necesita el 4.5:1 completo.
Etiquetas de botones: blanco sobre azul
La comprobación UI más hecha. Los azules vivos (unos 3.9:1) solo pasan texto grande. Oscurece los rellenos a unos 5-6:1 para etiquetas de tamaño normal. Prueba por separado los estados normal, hover y deshabilitado.
Enlaces dentro del texto
Los usuarios pegan el azul de enlace y el fondo del texto para ver si los enlaces solo por color llegan a 4.5:1. Si no, oscurece el enlace o añade subrayado (el color solo no debe ser la única pista).
Campos, bordes y letra pequeña 13px
Bordes de campos, casillas y avisos de 13px es donde muere el contraste. Bordes/UI necesitan 3:1. Las leyendas de 13px necesitan 4.5:1 como el texto base. Pega aquí tu gris de borde y el fondo del campo.
Titulares 24-32px y gráficos
El texto grande (24px o más, o 19px en negrita o más) solo necesita 3:1, igual que iconos, trazos de gráficos y anillos de foco. Prueba titulares, iconos y líneas de datos como pares aparte del texto base.
Texto sobre fotos y degradados
Caso top con imágenes: sube el hero, pulsa los píxeles más claros y más oscuros detrás del titular. Si alguno falla, añade un velo o sombra de texto y vuelve a probar el color mezclado. Nunca pruebes solo una parada de un degradado.