Verificador de Contraste
Verifique la relación de contraste de color para accesibilidad WCAG. Pruebe colores de primer plano y fondo.
The quick brown fox jumps over the lazy dog
Texto de cuerpo a 16px: esto es lo que van a leer de verdad tus visitantes.
Directrices de accesibilidad WCAG
AA Normal (4.5:1): Contraste mínimo para texto normal. Requerido para la mayoría del contenido web.
AA Large (3:1): Contraste mínimo para texto grande (18pt+ o 14pt+ negrita).
AAA Normal (7:1): Contraste mejorado para texto normal. Estándar de accesibilidad más alto.
AAA Large (4.5:1): Contraste mejorado para texto grande. Recomendado para contenido crítico.
Preajustes
Historial
Directrices de accesibilidad WCAG
El verificador de contraste de color le ayuda a asegurar que su sitio web cumple con los estándares de accesibilidad WCAG.
🔥 Herramientas populares
ℹ️ Acerca de Verificador de Contraste
Define un color de primer plano y uno de fondo con un código hexadecimal o con el selector de color y este comprobador te indica la relación de contraste WCAG 2.1, con marcas de apto o no apto para texto normal AA (4.5:1), texto grande AA (3:1), AAA normal (7:1) y AAA grande (4.5:1). Una muestra en vivo enseña la combinación en tamaños de titular y de texto de cuerpo, que es justo lo que necesita un diseñador antes de dar el visto bueno a una paleta. El cálculo de la luminancia relativa ocurre en tu navegador, y las combinaciones guardadas se quedan en el almacenamiento local.
💡 Casos de uso
📋 Cómo usar
Define el color del texto en el campo Primer plano, con el selector de color o escribiendo un valor hexadecimal como #4f46e5 en la casilla contigua.
Define el color de la página en el campo Fondo de la misma forma; la gran vista previa Aa se repinta al instante y la etiqueta de la relación de su esquina superior derecha se actualiza.
Consulta las cuatro tarjetas WCAG que hay bajo la vista previa —AA Normal, AA Grande, AAA Normal y AAA Grande—, cada una con una marca verde o una cruz roja según su umbral.
Pulsa las flechas de intercambio que hay entre los dos campos de color para probar la combinación invertida, o elige un preajuste como Blanco sobre oscuro o GitHub Dark para cargar una pareja conocida.
Pulsa Copiar debajo del número grande de la relación para copiar al portapapeles la relación y los cuatro resultados de apto o no apto, o pulsa Guardar para conservar la pareja en la franja de Historial.
💎 Consejos Pro
- Pega tu contenido directamente: el Comprobador de Contraste de Color detecta los formatos de entrada más habituales y aplica valores predeterminados razonables de forma automática.
- Usa los atajos de teclado (Ctrl/Cmd+A para seleccionar todo, Ctrl/Cmd+C para copiar) y agiliza tu trabajo dentro del Comprobador de Contraste de Color.
- Si la entrada es muy grande, divídela en partes: la mayoría de pestañas del navegador aguantan megabytes de texto, pero procesar volúmenes enormes puede bloquear la interfaz unos instantes.
- El Comprobador de Contraste de Color no registra ni almacena lo que introduces. Si necesitas un historial, copia los resultados importantes a un archivo local o a tu app de notas.
- Combina el Comprobador de Contraste de Color con otras herramientas de esta web (formateadores, conversores, codificadores) para montar flujos de datos completos sin salir del navegador.
❓ Preguntas frecuentes
Sí, es totalmente gratis: sin registro, sin clave de API, sin marcas de agua y sin límites de uso.
No. El Comprobador de Contraste de Color se ejecuta íntegramente en tu navegador, en el lado del cliente. Lo que introduces nunca pasa por nuestros servidores.
No hay un límite estricto, pero es normal que el rendimiento baje con entradas de más de unos pocos megabytes, según la memoria de tu dispositivo.
Sí. Los resultados generados con el Comprobador de Contraste de Color son tuyos y puedes usarlos libremente en cualquier proyecto personal o comercial.
Casi toda la lógica se ejecuta en JavaScript del lado del cliente, así que después de la carga inicial suele ser posible seguir trabajando sin conexión a la red.
Ninguno. Como el Comprobador de Contraste de Color se ejecuta en tu navegador, puedes procesar tantas entradas como te permita tu equipo, sin claves de API ni restricciones de velocidad.