Comprobador de contraste de colores
Comprueba si los colores de texto y fondo son legibles y cumplen los niveles AA y AAA de las pautas de accesibilidad WCAG.
Relación de contraste
Título grande
El texto pequeño debe seguir siendo legible.
Pautas WCAG 2.2: nivel AA = mínimo recomendado (y exigido por la normativa de accesibilidad), nivel AAA = reforzado.
Todo funciona en tu navegador: no se envía ningún dato.
Sobre esta herramienta
Este comprobador de contraste de colores calcula la relación de contraste entre un color de texto y un color de fondo con la fórmula de las pautas de accesibilidad WCAG. Te indica al instante si la combinación cumple los niveles AA y AAA para texto normal, texto grande y elementos de interfaz. Útil para diseñar una web, una app, un cartel o una carta que todo el mundo pueda leer.
Escribe dos códigos HEX o usa los selectores de color: una vista previa muestra un título y un texto pequeño con tus colores. Si el contraste no llega al nivel AA (4,5:1), la herramienta propone un color de texto cercano y conforme, con el mismo tono, que aplicas con un clic. También puedes intercambiar texto y fondo y copiar un enlace para compartir.
- Relación de contraste WCAG calculada al instante
- Niveles AA y AAA para texto normal y grande
- Control 3:1 para iconos y elementos de interfaz
- Sugiere un color de texto conforme AA
- Vista previa en directo y enlace para compartir
Cómo usarla
- Introduce el «Color del texto» y el «Color de fondo» (código HEX o selector).
- Consulta la «Relación de contraste» y la tabla de resultados.
- Si hace falta, pulsa «Usar este color» para aplicar la sugerencia.
- Copia el enlace para compartir la combinación.
Preguntas frecuentes
¿Se envían mis colores a algún sitio?
No. El cálculo se hace por completo en tu navegador y no se envía ningún dato. Los dos colores solo se guardan en la dirección de la página para el enlace para compartir.
¿El comprobador de contraste es gratis?
Sí, es gratuito y funciona sin cuenta ni registro.
¿Qué contraste necesito para cumplir WCAG AA?
Las pautas WCAG piden al menos 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA. El nivel AAA pide 7:1 y 4,5:1. Los iconos y elementos de interfaz necesitan 3:1.
¿Cómo corrijo un color de texto demasiado claro?
Cuando la relación es inferior a 4,5:1, la herramienta oscurece o aclara tu color de texto manteniendo su tono hasta alcanzar el nivel AA. Pulsa «Usar este color» para aplicarlo.