Analizador WCAG
Analiza una paleta completa para la conformidad de contraste WCAG en cada par. Obtén resultados de aprobado o fallo en AA y AAA y corrige las diferencias.
Paleta a analizar
Matriz de contraste
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Leyenda WCAG 2.1
Nivel AAA
Ratio ≥ 7:1 - Excelencia
Nivel AA
Ratio ≥ 4,5:1 - Estándar
AA grande
Ratio ≥ 3:1 - Texto grande
No cumple
Ratio < 3:1 - No conforme
Analiza una paleta completa para la conformidad de contraste WCAG en cada par. Obtén resultados de aprobado o fallo en AA y AAA y corrige las diferencias.
Analizador WCAG muestra únicamente los controles y resultados que corresponden a su función. Las opciones disponibles dependen de la herramienta y de la entrada.
Formatos compatibles
Cómo funciona
Paso 1
Abre Analizador WCAG y prepara la entrada solicitada por la interfaz
Paso 2
Ajusta los controles visibles según el resultado que buscas
Paso 3
Revisa el resultado antes de copiarlo, exportarlo o reutilizarlo
Errores comunes a evitar
- No des por compatible un formato u opción que no aparezca en la interfaz.
- Comprueba los valores antes de reutilizarlos en una identidad visual, interfaz o archivo final.
- Si el resultado se usa en texto o componentes de interfaz, revisa también el contraste.
Consejos de profesionales
- Conserva el valor de origen junto al resultado para poder comparar variantes.
- Usa los formatos que muestra realmente la herramienta en lugar de estimar conversiones.
- En móvil y tableta, permite que textos y controles ocupen varias líneas.
Tratamiento de datos
El tratamiento depende de la función utilizada. El consentimiento, la analítica y las funciones de cuenta del sitio son servicios separados de la operación de color.
Qué hace esta herramienta
Analiza una paleta completa para la conformidad de contraste WCAG en cada par. Obtén resultados de aprobado o fallo en AA y AAA y corrige las diferencias. Analizador WCAG se centra en esa tarea y no presupone funciones que no aparecen en su interfaz. Utiliza los controles disponibles para obtener el resultado necesario y comprueba los valores mostrados antes de trasladarlos a otra herramienta, hoja de estilos, archivo de diseño o documento.
Preparar una entrada adecuada
Empieza con la entrada que solicita Analizador WCAG: color, valor, imagen o ajuste según la pantalla. Los formatos indicados para esta página son Palette, HEX, CSS Variables, JSON. Si un formato u opción no aparece en la interfaz, no lo consideres compatible con esta función concreta.
Leer y comprobar el resultado
Interpreta el resultado según la operación realizada. Compáralo con el valor de origen y revisa los controles que han influido en el cálculo. Para trabajos visuales importantes, comprueba también el resultado en la interfaz real en la que se utilizará y no solo a partir del código.
Uso en móvil y tableta
Analizador WCAG usa el diseño responsive del sitio. Los títulos, subtítulos, breadcrumbs y controles pueden pasar a varias líneas en pantallas estrechas para que las traducciones largas no se corten. Aun así, revisa el resultado final en el dispositivo y el contexto en los que lo utilizarás.
Reutilizar el resultado en tu proyecto
Después de comprobar el resultado, usa únicamente las acciones que ofrece Analizador WCAG, como copiar o exportar cuando estén disponibles. Conserva el valor de origen si necesitas reproducir el ajuste y, en trabajos de interfaz, documenta también la función del color y el contraste necesario.
Herramientas relacionadas
Guías y tutoriales
Aprende a usar nuestras herramientas con nuestras guías detalladas.
wcag-analyzer: guía práctica de accessibility
Guía localizada para usar wcag-analyzer, entender buenas prácticas de accessibility y evitar errores comunes.
wcag-analyzer: guía práctica de accessibility
Guía localizada para usar wcag-analyzer, entender buenas prácticas de accessibility y evitar errores comunes.
wcag-analyzer: guía práctica de export
Guía localizada para usar wcag-analyzer, entender buenas prácticas de export y evitar errores comunes.
Preguntas frecuentes
Aprende a usar nuestras herramientas con nuestras guías detalladas.