Generador de Paletas Accesibles
Crea paletas de colores completas que cumplen automáticamente con los estándares WCAG de accesibilidad.
Primary
#3b82f6
Botones principales, enlaces
Primary Dark
#000000
Hover states, énfasis
Primary Light
#4f96ff
Fondos, badges
Text on Primary
#000000
Texto sobre color primario
Success
#10b981
Mensajes de éxito
Warning
#f59e0b
Advertencias
Error
#ef4444
Mensajes de error
Neutral Dark
#1f2937
Texto principal
Neutral
#6b7280
Texto secundario
Neutral Light
#f3f4f6
Fondos, bordes
Niveles WCAG
AAA: Contraste ≥ 7:1 (Nivel más alto)
AA: Contraste ≥ 4.5:1 (Texto normal)
AA Large: Contraste ≥ 3:1 (Texto grande 18pt+)
Fail: No cumple estándares WCAG
¿Cómo usar el generador?
- Selecciona un color base para tu paleta
- Elige el esquema de color (monocromático, análogo, complementario, etc.)
- El generador creará automáticamente una paleta completa
- Revisa los ratios de contraste WCAG para cada combinación
- Verifica que cumplan con AA o AAA según tus necesidades
- Copia los códigos HEX o exporta la paleta completa
Características
- Generación automática de paletas accesibles
- Verificación de contraste WCAG AA y AAA
- Múltiples esquemas de color (monocromático, análogo, complementario, tríada)
- Ratios de contraste calculados automáticamente
- Indicadores visuales de cumplimiento WCAG
- Códigos HEX, RGB y HSL
- Exportación de paleta completa
- Vista previa de combinaciones de texto
Estándares WCAG
Nivel AA (Mínimo)
Contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande.
Requerido para cumplir con estándares básicos de accesibilidad web.
Nivel AAA (Mejorado)
Contraste mínimo de 7:1 para texto normal y 4.5:1 para texto grande.
Recomendado para máxima accesibilidad y legibilidad.
Casos de uso
- Diseñar interfaces accesibles desde el inicio
- Crear sistemas de diseño inclusivos
- Cumplir con requisitos legales de accesibilidad
- Mejorar la legibilidad para usuarios con discapacidades visuales
- Diseñar para audiencias diversas
- Validar paletas existentes contra WCAG
- Crear temas oscuros y claros accesibles
- Documentar decisiones de color accesibles
Consejos
- Apunta siempre a cumplir con AA como mínimo
- AAA es ideal para sitios con mucho contenido de texto
- El texto grande (18pt+ o 14pt+ en negrita) tiene requisitos más flexibles
- Prueba tus colores con usuarios reales cuando sea posible
- Considera el daltonismo al elegir combinaciones
- No dependas solo del color para transmitir información
- Usa herramientas de simulación de daltonismo para validar
- Documenta los ratios de contraste en tu sistema de diseño