Verificador de contraste de colores (WCAG)
Comprueba si el color del texto tiene suficiente contraste con el fondo según las reglas de accesibilidad WCAG AA y AAA, con vista previa en vivo.
Probar contraste de colores
Todo se hace en tu dispositivo: nada se envía a internet.
Texto grande de ejemplo
Texto normal de ejemplo: la accesibilidad ayuda a todos a leer mejor, en cualquier pantalla.
Texto pequeño, como leyendas y pies de página.
Verificador de contraste de colores (WCAG): para qué sirve
Elige el color del texto y el del fondo para ver la tasa de contraste y si cumple con los criterios de accesibilidad WCAG para texto normal, texto grande e íconos. La vista previa muestra cómo se ve el texto en varios tamaños.
Acepta colores en hexadecimal (#RRGGBB o #RGB) y tiene un botón para invertir los colores.
Cómo usar
- Elige o escribe el color del texto.
- Elige el color del fondo.
- Mira el contraste y los niveles AA y AAA.
Cuándo usar
- Validar los colores de un sitio web o app.
- Elegir el color de botones y enlaces.
- Corregir alertas de accesibilidad de Lighthouse.
Preguntas frecuentes
¿Cuál es el contraste mínimo recomendado?
Según WCAG nivel AA, el texto normal necesita al menos 4,5:1 y el texto grande (a partir de 24 px, o 18,66 px en negrita) 3:1. En el nivel AAA, los mínimos suben a 7:1 y 4,5:1.
¿Por qué importa el contraste?
El texto con poco contraste es difícil de leer para personas con baja visión, daltonismo o que usan el celular bajo el sol. Además, las herramientas de SEO y accesibilidad señalan este problema.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas y funcionan directo en tu navegador.