By Diana Khalipina - Attention les contrastes de la maquette design peuvent changer une fois en ligne !!!!!!!
Ma conception a passé les tests d’accessibilité avec un contraste de 7:1, alors qu’un utilisateur a mesuré un rapport de 3,37:1 sur LinkedIn. Nous avions tous les deux raison au final, savez-vous pourquoi ?
J’avais créé un graphique et vérifié que le contraste des couleurs de chaque élément de texte était bien supérieur au minimum de 4,5:1 recommandé par les WCAG. Puis un abonné a fait remarquer qu’une partie du texte était difficile à lire sur son téléphone et a partagé une capture d’écran d’un outil de vérification du contraste indiquant 3,37:1 pour l’une des couleurs.
Plusieurs choses se produisent entre le moment où nous concevons quelque chose et celui où quelqu’un le voit :
1️⃣ Compression par la plateforme Lorsque nous publions des images sur les réseaux sociaux, celles-ci sont généralement compressées automatiquement pour réduire la taille du fichier. La compression peut légèrement modifier les couleurs et estomper les contours entre le texte et l’arrière-plan.
2️⃣ Redimensionnement des images Le graphique que j’ai conçu était assez grand, mais les plateformes redimensionnent souvent les images pour s’adapter à différents écrans, en particulier sur mobile. Lorsque l’image devient plus petite : • les traits du texte s’affinent • les contours s’adoucissent à cause du redimensionnement • la lisibilité diminue
3️⃣ Polices fines + anticrénelage Même avec des rapports de contraste suffisants, les polices fines peuvent réduire le contraste perçu. Lorsque le texte est redimensionné ou compressé, le navigateur mélange les pixels du texte avec ceux de l’arrière-plan (anticrénelage). Cela signifie que la couleur visible devient un mélange de texte et d’arrière-plan. Les outils de contraste intégrés aux logiciels de conception mesurent des couleurs pures, tandis que l’image finale rendue contient des pixels mélangés.
4️⃣ Écrans et conditions réelles Les utilisateurs consultent le contenu sur : • des téléphones en plein soleil • différentes technologies d’écran • différents niveaux de luminosité • parfois sans lunettes Tout cela influe sur la lisibilité perçue.
5️⃣ Mesure de l’image téléchargée Autre détail important : le contraste a été vérifié sur une capture d’écran de l’image téléchargée, et non sur le design original. Cela signifie que l’outil a mesuré des pixels déjà affectés par : • la compression • la mise à l’échelle • l’anticrénelage Le rapport de 3,37:1 mesuré pourrait donc en réalité être correct pour la version rendue de l’image.