El vidrio esmerilado luce muy bien en las capturas y es fácil hacerlo mal en el uso real. El riesgo principal es que el texto se sitúa sobre un fondo que cambia por debajo, así que el contraste puede variar de una zona a otra.
Los objetivos de contraste
WCAG pide una relación de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande (unos 24 px, o 19 px en negrita). Se aplican al texto frente a los píxeles reales que tiene detrás, incluido el fondo desenfocado.
Por qué el cristal es arriesgado
Con un alfa bajo, una parte brillante de la imagen subyacente puede reducir el contraste del texto blanco, mientras que una parte oscura puede dificultar la lectura del texto oscuro. Como el contenido o el fondo del usuario pueden desplazarse por debajo, no basta con comprobar una sola posición.
Soluciones prácticas
- Sube el alfa del panel hasta que el texto cumpla en el peor caso.
- Añade un tinte acorde con el texto: un relleno translúcido oscuro para texto blanco, uno claro para texto oscuro.
- Aumenta el desenfoque, que elimina el detalle y hace más uniforme la zona de detrás.
- Usa sombra de texto o más peso para el texto pequeño sobre fondos recargados.
- Mantén el cristal decorativo lejos de los textos largos. Úsalo para tarjetas con títulos y etiquetas cortas.
Pruébalo
Comprueba con un verificador de contraste las zonas más claras y más oscuras de tu fondo detrás del panel. Prueba el peor caso, no un promedio.
Respeta las preferencias del usuario
Algunos usuarios activan la transparencia reducida en su sistema operativo. La media query prefers-reduced-transparency aún no es compatible en todas partes, pero un panel sólido de respaldo es una buena red de seguridad. Admite también los modos de alto contraste asegurándote de que los bordes sigan siendo visibles.
Preguntas frecuentes
¿El glassmorphism es malo para la accesibilidad? No intrínsecamente, pero necesita un ajuste deliberado del contraste.
¿Con qué alfa debo empezar? Alrededor de 0.2 para decoración, y 0.6 o más cuando contiene texto de cuerpo.