🌗 Verificador de contraste de color (WCAG AA / AAA)
Comprueba al instante si tu combinación de color de texto y fondo cumple los estándares de accesibilidad WCAG 2.x AA o AAA — directamente en tu navegador, gratis, sin que ningún dato salga de tu dispositivo. Elige o escribe cualquier color HEX, ve la relación de contraste exacta y obtén etiquetas de aprobado/no aprobado para texto normal, texto grande y ambos niveles de cumplimiento.
Acerca de
La fórmula de relación de contraste de WCAG (Pautas de Accesibilidad al Contenido Web) calcula la luminancia relativa de cada color usando el estándar sRGB IEC 61966-2-1 y determina cuánto más claro es un color respecto al otro. Una relación de 4,5:1 o superior satisface el nivel AA para texto normal (16 px), mientras que 7:1 o superior cumple el AAA. El texto grande (24 px o 18,67 px en negrita) tiene umbrales más flexibles: 3:1 para AA y 4,5:1 para AAA. Esta herramienta ejecuta el algoritmo WCAG 2.x completo en tu navegador — sin servidor, sin cuenta, sin rastreo. Los resultados se guardan localmente para que tu último par de colores te espere al volver.
Cómo usar
- Elige tu color de texto con el selector de color o escribe un código HEX (p. ej. #1a2b3c) en el campo Color de texto.
- Elige tu color de fondo del mismo modo en el campo Color de fondo. Usa el botón Intercambiar para cambiar rápidamente los dos colores.
- Lee la relación de contraste que aparece en texto grande y revisa las cuatro etiquetas de aprobado/no aprobado: AA y AAA para texto normal y texto grande.
- Previsualiza cómo se ve realmente tu texto sobre el fondo elegido en la sección Vista previa en vivo antes de finalizar tu diseño.
Preguntas frecuentes
- ¿Es gratuito este verificador de contraste WCAG?
- Sí, completamente gratis: sin registro, sin suscripción de pago y sin límites de uso. Abre la página y empieza a comprobar colores de inmediato.
- ¿Funciona sin conexión a internet?
- Sí. Todos los cálculos se ejecutan en tu navegador con JavaScript. Una vez cargada la página, puedes desconectarte de internet y la herramienta sigue funcionando. No se envía ningún dato a ningún servidor.
- ¿Son privados mis datos de color? ¿Se sube algo?
- Tus colores nunca salen de tu navegador. Sin análisis de los colores que introduces, sin cargas, sin intercambio con terceros. Tu último par de colores se guarda solo en el localStorage de tu navegador.
- ¿Cuál es la diferencia entre WCAG AA y AAA?
- AA es el estándar mínimo exigido por la mayoría de normativas (p. ej. ADA, EN 301 549). El texto normal necesita una relación de 4,5:1; el texto grande (24 px o negrita 18,67 px) necesita 3:1. AAA es accesibilidad mejorada: 7:1 para texto normal y 4,5:1 para texto grande. Apunta al menos al nivel AA en todos los diseños de producción.
- ¿Puedo comprobar colores usando la forma corta de 3 dígitos HEX como #fff?
- Sí. La herramienta acepta tanto la forma corta de 3 dígitos (#rgb) como los códigos HEX completos de 6 dígitos (#rrggbb). Solo tienes que escribir o pegar tu color y el verificador lo expande y valida automáticamente.