Verificador de Contraste WCAG
Verifica el contraste de colores según las pautas de accesibilidad WCAG
Acerca de Verificador de Contraste WCAG
Verifica si la combinación de colores de tu texto y fondo cumple con las pautas de accesibilidad WCAG 2.1.
Cómo usar Verificador de Contraste WCAG
- 1Selecciona o ingresa el color del texto.
- 2Selecciona o ingresa el color del fondo.
- 3Revisa la relación de contraste y las calificaciones de conformidad (AA, AAA).
- 4Ajusta los colores hasta cumplir con el nivel deseado de accesibilidad.
- 5Copia las variables CSS para el par de colores accesible.
Consejos
- WCAG AA requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande.
- WCAG AAA es el estándar más alto — requiere 7:1 para texto normal y 4.5:1 para texto grande.
- Usa esta herramienta al diseñar paletas de colores para asegurar accesibilidad desde el inicio.
Límites gratis vs. pago
Gratis: verificación de contraste y vista previa. Starter+: sugerencias de corrección automática de colores y pares accesibles.
Herramientas relacionadas
Equipo OneKitToolsActualizado 2.21.4