Share
L'un des aspects les plus importants de la création de sites Web accessibles est de garantir que le texte est lisible. Et à son tour, créer un texte lisible signifie que vous obtenez un contraste de couleur adéquat entre les couleurs de votre texte et celles de votre arrière-plan..
Par exemple, jetez un coup d'œil au texte violet sur fond blanc de la page d'accueil de Tuts +. Ce niveau de contraste est tout bon:
Exemple d'un bon rapport de contraste de texte Mais si nous éclaircissons le texte, nous pouvons rapidement atteindre un point où le contraste est trop faible et où il devient trop difficile de lire:
Le même texte ajusté a maintenant un mauvais rapport de contraste Cela peut être un concept relativement simple, mais assurer un contraste suffisant dans la pratique peut en réalité être un peu délicat. Parfois, le contraste des couleurs peut paraître agréable à l’œil mais, en réalité, il se peut qu’il ne soit pas à la hauteur. Alors, comment pouvons-nous être certains que nos niveaux de contraste de couleurs sont favorables à l’accessibilité? C'est là que Chrome Dev Tools peut vous aider..
Ce tutoriel fait partie de l'accessibilité Web: le guide complet d'apprentissage, où nous avons rassemblé une gamme de tutoriels, d'articles, de cours et d'ebooks pour vous aider à comprendre l'accessibilité au Web dès le début..
Vous remarquerez que dans les captures d'écran ci-dessus, le sélecteur de couleur de Chrome Dev Tools. Si vous regardez de plus près, vous pouvez également constater que ce sélecteur de couleurs contient des informations supplémentaires, telles que l'affichage d'un score de contraste, permettant de mieux comprendre les choix de couleurs. Cela fait partie des outils d'accessibilité ajoutés récemment dans Chrome. Voyons comment cela fonctionne..
RemarqueRemarque: certaines instructions sur le Web indiquent que vous devez activer «Expérimentation de développeur» pour utiliser ces fonctions de vérification du contraste des couleurs, mais ce n'est plus le cas. La fonctionnalité est maintenant intégrée à la fois à Chrome et à Chrome..
Commencez par ouvrir les outils de développement Chrome / Chromium, puis sélectionnez un élément de texte dans votre code HTML. Ensuite, dans le modes onglet, localisez le Couleur propriété, et à droite de celui-ci, cliquez sur la petite nuance de couleur afin d'ouvrir l'outil de sélection.
Sélectionnez un élément de texte et cliquez sur le carré de couleur pour commencer Dans la zone que j'ai mise en surbrillance avec un carré rouge ci-dessous, vous verrez le score de contraste de 5,00 auquel cet élément de texte a été attribué. Ce score est obtenu en détectant la couleur de l'élément d'arrière-plan et en le comparant avec la couleur du texte.
Vous remarquerez également qu'il y a deux graduations vertes à côté du score, ce qui signifie que ce rapport de contraste se situe dans les paramètres acceptés pour l'accessibilité..
Obtenir le tic-tac d'approbation sur le rapport de contraste Ce score de ratio de base est utile, mais pour accéder à tous les outils de contraste de couleurs, cliquez sur la flèche dirigée vers le bas, à droite du score de contraste. Il affichera une info-bulle intitulée Montre plus quand vous passez dessus.
Développer les outils pour obtenir plus d'informations sur le contraste des couleurs Avec cette section élargie, nous obtenons des informations supplémentaires. Vous verrez ici les scores de contraste idéaux que vous devriez essayer d'obtenir, les chiffres les plus élevés représentant le contraste le plus fort. Un score compris entre 3,0 et 4,5 correspond à «AA» et est considéré comme le minimum, tandis que 4,5 ou plus correspond à «AAA» et est idéal..
Nous voyons maintenant les scores de contraste à viser et une ligne "sûre" sur le sélecteur de couleurs. Vous remarquerez également qu'une fois les outils de contraste de couleurs complètes développés, une ligne apparaît en haut du sélecteur de couleurs. Il s’agit de la ligne de démarcation entre les couleurs de texte notées au moins «AA» et celles qui ne répondent pas aux normes..
Remarque: vous pouvez vous approcher assez près de la ligne et passer d’une note «AAA» à «AA», en restant au-dessus de 3,0 mais en dessous de 4,5:
Se rapprocher de la ligne est toujours correct, mais pas idéal Cependant, tout ce qui se trouve au-dessus de la ligne sera signalé par des symboles d'avertissement rouges pour indiquer que la combinaison de couleurs pose un problème d'accessibilité:
Franchissez la ligne et perdez votre note de contraste AA / AAA Vous pouvez également déplacer le curseur alpha, situé sous le curseur de teinte, et la ligne «sûre» se déplacera pour prendre en compte la transparence accrue:
Déplacer le curseur alpha déplace également la ligne «sûre» Une autre chose à prendre en compte est que le côté de la ligne sur lequel vous voulez placer la couleur de votre texte peut être inversé en fonction de la couleur de votre arrière-plan. Si votre texte est sur un fond sombre, vous voulez que la couleur de votre texte apparaisse au dessus de la ligne. Si votre texte est sur un fond clair, sa couleur devrait tomber au dessous de la ligne.
Ci-dessous, nous voyons un exemple de cette inversion, avec un arrière-plan sombre dans l'image de gauche et un arrière-plan clair dans l'image de droite. Notez qu’il existe également un aperçu des couleurs du texte et de l’arrière-plan. Recherchez le Aa dans un cercle, au-dessous du Montre plus commutateur:
Sur la gauche, le texte de couleur claire sur un fond sombre doit avoir sa couleur au-dessus de la ligne. A droite, le texte de couleur sombre sur un fond clair doit avoir sa couleur en dessous de la ligne.. Ces outils de vérification du contraste des couleurs en chrome et en chrome faciliteront considérablement la lisibilité pendant le processus de conception. Tout ce que nous avons à faire est de vérifier rapidement chacune des couleurs de notre texte. Utilisez le sélecteur de couleur pour modifier le texte si nécessaire, puis réintégrez les nouvelles couleurs dans notre code..
C'est un pas de plus pour faire du Web un endroit formidable pour tout le monde!
Accentsconagua