¿Qué es el estándar WCAG AA y AAA?

Son niveles de conformidad de las Pautas de Accesibilidad para el Contenido Web. AA requiere un contraste de 4.5:1 para texto normal, mientras que AAA exige 7:1.

¿Cómo debo formatear los colores de entrada?

Debes ingresar un color por línea, usando el formato 'nombre: #hexadecimal', por ejemplo, 'texto: #111827'.

¿La herramienta sugiere nuevos colores?

Sí, el informe identifica las combinaciones que no cumplen el estándar y proporciona recomendaciones de ajuste mínimo para alcanzar el contraste necesario.

¿Puedo probar colores para textos grandes?

Sí, puedes seleccionar objetivos específicos como 'AA Large Text' (ratio 3:1) o 'AAA Large Text' (ratio 4.5:1) en la configuración.

¿Qué significa incluir pares del mismo color?

Es una opción que evalúa el contraste de un color contra sí mismo, útil en casos muy específicos de pruebas de componentes superpuestos, aunque normalmente se mantiene desactivada.

Elysia Tools

Navegación

Design

Comprobador de contraste de paleta accesible

Audita combinaciones de color segun WCAG 2.1 AA y AAA y propone ajustes

Detalles

Qué te ayuda a hacer esta herramienta

Util para sistemas de diseno, marcas y temas visuales con recomendaciones de ajuste minimo.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

1 ejemplos

Auditar una paleta de marca para WCAG AA

Revisa todas las combinaciones de primer plano y fondo e indica que colores necesitan ajuste

{"summary":{"colorCount":4,"combinationCount":12,"failingCount":4},"recommendations":[{"pair":"brand-secondary on surface"}]}

Entradas

Completa los campos necesarios y ejecuta la herramienta.

3 opciones

ContenidoPega o escribe los valores principales.1

Colores de la paletatextareaObligatorio

AjustesAjusta formatos, rangos, números y modos.1

Objetivo WCAGselectOpcional

InterruptoresActiva o desactiva comportamientos opcionales.1

Incluir pares del mismo colorcheckboxOpcionalActivado si está marcado

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Comprobador de contraste de paleta accesible

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Auditoría de paleta de marca para WCAG AA

2. Verificación de contraste para modo oscuro (AAA)

Preguntas frecuentes

Ejemplos de Códigos de Color

Ejemplos de Procesamiento de Imágenes Android Java

Ejemplos de Procesamiento de Imágenes Android Kotlin

Ejemplos de Procesamiento de Imágenes Web Python

Verificador de Accesibilidad de Color

Verificador de Contraste de Color

Comprobador de accesibilidad de vision del color

Generador de informes de auditoria de accesibilidad

Generadores de efectos CSS, paletas y tokens de diseno

Herramientas de auditoria de accesibilidad web y color accesible

Herramientas de Diseño de Color y Conversión de Espacios de Color

Herramientas de conversion de espacios de color para web e impresion