Verificador de Contraste

Verificador de Contraste - Herramienta de Accesibilidad WCAG

Un verificador completo de contraste de color que evalúa combinaciones de color de primer plano y fondo contra las pautas WCAG 2.1. Prueba niveles de cumplimiento AA y AAA para texto normal y grande. Esencial para diseñadores, desarrolladores y cualquiera que cree contenido web accesible.

¿Qué es el contraste de color y por qué importa?

El contraste de color es la diferencia en luminancia entre dos colores, típicamente entre texto y su fondo. Es crucial para la accesibilidad web.

Por Qué Importa:
- Mayor contraste = más fácil de leer
- Bajo contraste causa fatiga ocular
- Esencial para personas con baja visión
- Requerido por ley en muchos países

Pautas WCAG:
- AA: 4.5:1 para texto normal
- AA: 3:1 para texto grande
- AAA: 7:1 para texto normal
- AAA: 4.5:1 para texto grande

¿Cómo uso el verificador de contraste?

Pasos simples para verificar tu contraste de color:

1. Elegir Colores:
- Ingresar códigos hex manualmente
- Usar selectores de color
- Aplicar combinaciones predefinidas

2. Ver Resultados:
- Ratio de contraste mostrado
- Estado de cumplimiento AA
- Estado de cumplimiento AAA

3. Verificar Vista Previa:
- Ver apariencia real del texto
- Muestra de texto normal
- Muestra de texto grande

4. Ajustar si es Necesario:
- Usar botones Aclarar/Oscurecer
- Probar colores similares sugeridos

¿Qué son los niveles AA y AAA de WCAG?

WCAG define niveles de accesibilidad:

Nivel AA (Conformidad Mínima):
- Texto Normal: 4.5:1 mínimo
- Texto Grande: 3:1 mínimo
- Requisito más común
- Equilibrio de accesibilidad y diseño

Nivel AAA (Conformidad Mejorada):
- Texto Normal: 7:1 mínimo
- Texto Grande: 4.5:1 mínimo
- Mayor accesibilidad
- Más restrictivo

¿Cómo se calcula el ratio de contraste?

La fórmula matemática para ratio de contraste:

Fórmula:
Ratio de Contraste = (L1 + 0.05) / (L2 + 0.05)

Donde:
- L1 = Luminancia relativa del color más claro
- L2 = Luminancia relativa del color más oscuro

Ejemplos:
Negro sobre Blanco: 21:1 (Máximo)
Azul Oscuro sobre Blanco: 8.59:1 (Pasa AAA)

¿Qué pasa si mis colores no pasan?

Varias estrategias para mejorar el contraste que falla:

1. Ajustar Luminosidad:
- Aclarar fondo
- Oscurecer primer plano

2. Probar Sugerencias:
- La herramienta proporciona colores similares
- Mantiene matiz similar
- Pasa automáticamente estándares

3. Intercambiar Colores:
- Cambiar primer plano/fondo
- A veces funciona instantáneamente

4. Usar Combinaciones Predefinidas:
- Negro sobre blanco: 21:1
- Blanco sobre negro: 21:1
- Azul oscuro sobre blanco: Usualmente AAA

Características Clave

• Cálculo de ratio de contraste en tiempo real
• Verificación de cumplimiento WCAG 2.1 AA
• Verificación de cumplimiento WCAG 2.1 AAA
• Contraste de texto normal (4.5:1, 7:1)
• Contraste de texto grande (3:1, 4.5:1)
• Vista previa en vivo de combinaciones
• Indicadores Pasa/Falla para cada nivel
• Selectores de color interactivos
• Ajuste de color Aclarar/Oscurecer
• Sugerir colores similares que pasen
• Combinaciones predefinidas de alto contraste
• Cálculo de luminancia relativa
• Procesamiento 100% del lado del cliente