Comprobador de contraste de paletas
Compara todos los pares de colores HEX de una paleta con los umbrales WCAG para texto.
Probar un ejemplo explicado
Probar un ejemplo explicado
Compara todos los pares de colores HEX de una paleta con los umbrales WCAG para texto.
Comprueba las unidades y opciones y pulsa el botón de cálculo de la herramienta. El ejemplo es ficticio; sustituye los valores para tu propio cálculo.
Texto de ejemplo
- Colores de la paleta (un HEX por línea)
- #000000 #ffffff #2563eb
Resultado esperado
| Color 1 · #000000 | Color 2 · #ffffff | Color 3 · #2563eb Color 1 · #000000 | — | 21,00:1 · AA normal ✓ · AAA normal ✓ · AA texto grande ✓ · AAA texto grande ✓ | 4,06:1 · AA normal × · AAA normal × · AA texto grande ✓ · AAA texto grande × Color 2 · #ffffff | 21,00:1 · AA normal ✓ · AAA normal ✓ · AA texto grande ✓ · AAA texto grande ✓ | — | 5,17:1 · AA normal ✓ · AAA normal × · AA texto grande ✓ · AAA texto grande ✓ Color 3 · #2563eb | 4,06:1 · AA normal × · AAA normal × · AA texto grande ✓ · AAA texto grande × | 5,17:1 · AA normal ✓ · AAA normal × · AA texto grande ✓ · AAA texto grande ✓ | —
La matriz calcula la relación de contraste entre cada par de colores opacos e indica los umbrales AA y AAA para texto normal y grande.
Esperando a la herramienta. La explicación sigue disponible sin JavaScript.
Método y límites
Escribe de 2 a 20 colores HEX, uno por línea. Cada celda compara el color de su fila con el de su columna. Para texto normal, AA exige 4,5:1 y AAA 7:1; para texto grande, los umbrales son 3:1 y 4,5:1.
Solo acepta colores HEX opacos de 3 o 6 dígitos. Muestra los umbrales para texto normal y grande, pero no comprueba el tamaño ni el grosor real de la fuente, los controles de interfaz, las imágenes ni otros requisitos de accesibilidad.
Compartir esta herramienta
Solo se comparte el enlace público de la herramienta. Tus entradas y resultados se quedan aquí.
Mostrar enlace para copiarlo manualmente
Respuesta rápida
La matriz calcula la relación de contraste entre cada par de colores opacos e indica los umbrales AA y AAA para texto normal y grande.
El código de la página y sus recursos se cargan desde el sitio; las herramientas diseñadas para el procesamiento local gestionan los datos introducidos en el navegador.
Cómo usarla
Escribe de 2 a 20 colores HEX, uno por línea. Cada celda compara el color de su fila con el de su columna. Para texto normal, AA exige 4,5:1 y AAA 7:1; para texto grande, los umbrales son 3:1 y 4,5:1.
Límites
Solo acepta colores HEX opacos de 3 o 6 dígitos. Muestra los umbrales para texto normal y grande, pero no comprueba el tamaño ni el grosor real de la fuente, los controles de interfaz, las imágenes ni otros requisitos de accesibilidad.
Preguntas frecuentes
¿Qué significa la relación de contraste?
Es la relación entre las luminancias relativas de dos colores. Un valor más alto mejora el contraste, pero no garantiza por sí solo que una página sea accesible.
¿La herramienta detecta si el texto es grande?
No. Muestra los umbrales AA y AAA tanto para texto normal como para texto grande. Usa los resultados para texto grande solo si el tamaño y el grosor de la fuente cumplen la definición de texto grande de WCAG.
Fuentes y referencias
Estas referencias documentan las normas y fuentes citadas; no validan el resultado de la herramienta.