Face à l'intérêt croissant pour l'accessibilité web, nous avons développé des outils pour faciliter et clarifier les évaluations d'accessibilité dans le cadre de notre service d'évaluation.
Dans le cadre de cette initiative, la première étape a consisté à lancer l'extension Chrome « Area Contrast Checker ».
Contexte du développement
Il existe trois principaux types de mires de contraste classiques, chacun présentant ses propres avantages et inconvénients.
- Type de numérisation automatique
Bien qu'efficace car elle extrait mécaniquement les données de la page entière, elle présente l'inconvénient d'être sujette aux faux positifs et aux détections manquées lorsque l'arrière-plan est une image ou un dégradé. - Type de sélecteur (pipette)
Bien qu'il puisse mesurer avec précision la couleur telle qu'elle apparaît, son inconvénient est qu'il nécessite une extraction manuelle de chaque zone individuelle, ce qui augmente la charge de travail. - Type spécifique à l'élément
Bien qu'il soit facile à utiliser car il fait directement référence aux informations HTML/CSS, il ne peut pas inspecter les images et peut ne pas capturer correctement l'état de rendu réel, comme le chevauchement et la transparence des éléments.
Une quatrième approche totalement inédite
Avec Area Contrast Checker, nous avons mis au point une quatrième approche totalement inédite.
Sélectionnez la zone à examiner en traçant un rectangle autour. Le logiciel analysera les pixels de cette zone et détectera automatiquement deux couleurs : la couleur d’arrière-plan et la couleur de premier plan. Comme il cible l’affichage tel qu’il apparaît à l’utilisateur, il peut inspecter les images malgré la présence d’éléments superposés.
Vous pouvez facilement effectuer une recherche en faisant simplement glisser la zone qui vous intéresse.
Caractéristiques principales
▪️Les WCAG 2.1 et 2.2 sont adaptés à l'évaluation
Sur la base des critères de succès 1.4.3, 1.4.6 et 1.4.11, les rapports de contraste du texte normal (AA : 4,5:1, AAA : 7:1), du texte de grande taille (AA : 3:1, AAA : 4,5:1) et des composants d'interface utilisateur (AA : 3:1) sont évalués.
▪️ Conforme à la norme APCA de nouvelle génération
Ce logiciel prend en charge la nouvelle norme de contraste « APCA (Accessible Perceptual Contrast Algorithm) », actuellement à l’étude dans le projet de norme WCAG 3.0. Il affiche instantanément la taille de police maximale (valeur Lc) pour laquelle il est compatible.
▪️ Suggestions de couleurs préservant la teinte
Si le rapport de contraste est insuffisant, le système suggérera une couleur approximative conforme à la norme tout en conservant la teinte de la couleur d'origine.
▪️Fonctionnalités avancées pour les professionnels
Prend en charge les formats de couleur HEX, RGB et HSL.
- Si vous souhaitez affiner les résultats de la détection automatique, vous pouvez resélectionner les pixels un par un à l'aide du sélecteur.
- Prend en charge deux langues : le japonais et l'anglais
Téléchargez l'outil de vérification des contrastes de zone ici
Chez Liberogic, notre objectif est de faire de l'accessibilité une qualité standard plutôt qu'un élément nécessitant une attention particulière.
Cet outil intègre toutes les fonctionnalités « et si… » que nous avons rencontrées lors du développement web et des évaluations d'accessibilité. Nous prévoyons de publier d'autres outils pour rendre l'accessibilité encore plus simple et fluide. Restez à l'affût !
