Analizador de Accesibilidad de Degradados
Analiza degradados para detectar zonas donde el contraste de texto puede ser insuficiente
Analizador de Accesibilidad de Degradados
Analiza degradados para legibilidad de texto. Detecta zonas peligrosas donde el contraste puede ser insuficiente.
Texto de Titular de Ejemplo
Este es texto de cuerpo para probar legibilidad a través del degradado.
Análisis de Contraste a lo Largo del Degradado
Consejos para Degradados Accesibles
- • Evita colocar texto sobre las áreas de menor contraste
- • Considera añadir una capa semitransparente detrás del texto
- • Usa degradados oscuros con texto blanco o degradados claros con texto oscuro
- • Prueba con contenido real, no solo texto de ejemplo
Cómo funciona
Los degradados son populares en diseño web, pero pueden crear problemas de accesibilidad si el texto no tiene suficiente contraste en todas las zonas del gradiente.
El problema con los degradados
A diferencia de los fondos sólidos, un degradado tiene múltiples valores de color a lo largo de su recorrido. Esto significa que el contraste del texto varía dependiendo de dónde se posicione sobre el gradiente.
¿Qué son las zonas peligrosas?
Las zonas peligrosas son áreas del degradado donde el contraste entre el texto y el fondo cae por debajo de los umbrales WCAG recomendados:
- Crítico: Contraste < 3:1 (falla AA Large)
- Advertencia: Contraste < 4.5:1 (falla AA)
- Seguro: Contraste ≥ 4.5:1 (pasa AA)
Soluciones comunes
- Capa semitransparente: Añade un overlay oscuro o claro detrás del texto
- Posicionamiento estratégico: Coloca el texto solo en zonas seguras
- Sombra de texto: Añade text-shadow para mejorar la legibilidad
- Ajustar el degradado: Modifica los colores para mantener contraste uniforme
Mejores prácticas
- Usa degradados más oscuros con texto blanco o más claros con texto negro
- Evita degradados con transiciones de luminosidad extremas
- Prueba con contenido real, no solo texto de ejemplo
- Considera usar degradados solo para elementos decorativos, no para fondos de texto
💡 Ejemplos de uso prácticos
Caso 1: Hero con degradado azul-púrpura
Degradado de #3B82F6 a #8B5CF6 con texto blanco.
→ Zona azul: 4.8:1 ✅ Pasa AA
→ Zona púrpura: 3.9:1 ⚠️ Solo pasa AA Large
→ Solución: Oscurecer el púrpura a #7C3AED
Caso 2: Banner con degradado naranja-amarillo
Degradado de #F97316 a #FBBF24 con texto negro.
→ Zona naranja: 3.2:1 ⚠️ Bajo para texto pequeño
→ Zona amarilla: 1.8:1 ❌ Falla completamente
→ Solución: Usa texto oscuro #1F2937 o añade sombra
Caso 3: Card con degradado sutil
Degradado de #1E293B a #334155 con texto blanco.
→ Todo el degradado: 8.5:1 - 6.2:1 ✅ Excelente
→ Este tipo de degradados sutiles son ideales para texto