Introduction : le flou séduit, la lisibilité décide
Le glassmorphism empile un fond translucide, un flou d'arrière-plan et une bordure fine. Avec Liquid Glass sur iOS 26, Apple l'a remis au centre de la scène. Résultat : on en voit partout, y compris là où il n'a rien à faire.
Le verdict le plus net vient du Nielsen Norman Group. Son titre est sans détour : « Liquid Glass Is Cracked, and Usability Suffers in iOS 26 ». Le problème n'est pas l'esthétique, c'est le contraste.
Nous avions déjà comparé Liquid Glass et Material 3 Expressive côté langage visuel. Ici, on traite le sujet pratique : où le verre fonctionne, où il casse la lecture, et comment l'écrire en CSS sans piège.
Pourquoi le verre pose un problème de contraste
Le fond n'est jamais le même
La règle WCAG 1.4.3 exige 4,5:1 pour le texte courant et 3:1 pour le gros texte, selon la page Understanding SC 1.4.3 du W3C. Ce ratio se calcule entre le texte et son fond.
Avec une couche translucide, le fond est ce qui passe derrière : une photo, une liste, une vidéo. Il change au scroll. Notre pratique : mesurer le ratio contre le pire fond possible, pas contre la maquette statique.
Le W3C rappelle aussi qu'un texte peut passer le seuil sur le papier et rester pénible à lire. Sa piste : une graisse plus forte, ou un couple de couleurs qui dépasse nettement le minimum.
Texte sur texte, cibles qui disparaissent
Le NN/g donne des exemples précis. Dans Mail, la barre de recherche recouvre les aperçus d'e-mails : « Text on top of text creates an illegible mess ». Dans Safari et Plans, les contrôles flottants se fondent dans le contenu.
La barre d'onglets souffre aussi. Elle est plus dense, avec des cibles plus petites, et la recherche devient une pastille séparée qui fragmente la navigation, d'après l'article.
Le ratio WCAG ne capte pas tout ça. Pour aller plus loin sur la mesure, voir notre article sur le contraste APCA au-delà du ratio.
Le mouvement aggrave le problème
Un verre qui réagit au contenu en mouvement attire l'œil là où il ne faut pas. Le NN/g conclut sur une formule à retenir : « Motion for motion's sake is not usability ».
Pour un site web, la leçon est directe : un effet décoratif qui bouge derrière du texte doit rester l'exception. Un fond stable rend le flou prévisible, donc testable.
Où le verre fonctionne vraiment
Les couches flottantes et courtes
Le verre se défend sur les éléments qui flottent au-dessus du contenu. Ils sont lus brièvement et peuvent disparaître : modale, tooltip, barre de navigation collante. L'effet sert alors à garder le contexte visible, pas à décorer.
Il fonctionne aussi quand le fond est connu : un dégradé fixe, une illustration que vous contrôlez. Vous pouvez alors vérifier le contraste une fois pour toutes.
Là où il faut s'en passer
Pour du texte long, des formulaires ou des tableaux de données, un fond opaque gagne toujours. Un champ de saisie translucide au-dessus d'une photo, c'est un test de contraste raté d'avance.
Notre checklist avant de livrer un panneau en verre :
- Le fond derrière est-il maîtrisé, ou change-t-il avec le contenu ? → tester le pire cas.
- Le texte passe-t-il 4,5:1 sur le fond le plus clair et le plus chargé ? → sinon, voile plus opaque.
- Le panneau recouvre-t-il du texte qui défile ? → éviter, ou rendre le fond opaque.
- Les cibles tactiles restent-elles lisibles et assez grandes ? → ne pas les rétrécir pour l'effet.
Cas pratique : une barre de navigation collante
Prenons le cas le plus courant sur un site : une barre de navigation qui reste en haut pendant le scroll. Le contenu défile dessous, donc le fond change en permanence. C'est le pire cas pour le contraste, et aussi l'usage où le verre apporte le plus.
Le réflexe : fixer d'abord la couleur de base du panneau, opaque, puis la rendre translucide par paliers. À chaque palier, on fait défiler une page avec une image claire et un bloc de texte noir juste derrière la barre. Le premier palier où un libellé devient difficile à lire est trop loin.
On s'arrête un cran avant. La barre garde alors un léger flou, qui rappelle qu'il y a du contenu dessous, sans jamais mettre le libellé des liens en danger. C'est moins spectaculaire qu'une démo Apple, et c'est ce qui passe l'audit.
L'écrire proprement en CSS
Support et coût de backdrop-filter
Selon web.dev, backdrop-filter est pris en charge sans préfixe depuis Chrome 76, Edge 79, Firefox 103 et Safari 18. Les versions antérieures de Safari et d'Edge l'acceptaient déjà, parfois avec le préfixe -webkit-.
L'article prévient de trois points. L'effet peut nuire aux performances, donc il faut tester. L'élément doit être au moins partiellement transparent, sinon il n'y a rien à flouter. Enfin, la propriété crée un nouveau contexte d'empilement.
Un fond opaque par défaut, le verre en amélioration
web.dev recommande de se rabattre sur une image plutôt que sur un polyfill. Nous préférons une approche plus simple : un fond opaque par défaut, et le verre ajouté seulement si le navigateur le supporte. Le contraste est garanti dans tous les cas.
Son extrait contient une petite erreur : blurred-hero.png y figure sans url(). Voici notre version :
.glass {
background: #1b1f2a;
color: #fff;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgb(27 31 42 / 0.78);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
}
@media (prefers-contrast: more) {
.glass {
background: #1b1f2a;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}Les valeurs (0,78 d'opacité, 16 px de flou) sont un point de départ à tester sur vos vrais fonds, pas une recette universelle. La requête prefers-reduced-transparency existe dans la spécification Media Queries 5, mais son support reste inégal : à vérifier avant de s'y fier.
Dans Figma : tester avant de coder
Dans Figma, le flou d'arrière-plan se règle en quelques clics. C'est là que l'illusion est la plus forte : la maquette montre un seul fond. Posez le même panneau sur trois fonds — clair, sombre, chargé — et vérifiez le texte sur chacun.
Pour le verre dépoli, notre article sur Displace pour Figma montre une façon d'ajouter du grain sans toucher à la lisibilité du texte. Le panorama des autres styles est dans notre guide des styles d'interface nommés.
Conclusion : le verre est un accent, pas un système
Le glassmorphism marche quand il reste une couche : un panneau flottant, un fond maîtrisé, un texte qui passe le seuil dans le pire cas. Il échoue quand il devient le matériau de toute l'interface.
Notre règle : opaque par défaut, verre en bonus, test sur trois fonds. Si l'effet ne survit pas à ce protocole, il n'est pas prêt pour la production.
