Avec la montée d'intérêt pour l'accessibilité web, nous avons développé des outils pour soutenir les diagnostics d'accessibilité de manière plus simple et claire grâce à nos services de diagnostic d'accessibilité.
En tant que première étape, l'extension Chrome « Area Contrast Checker » a été lancée.
Contexte du développement
Les vérificateurs de contraste classiques se répartissent en trois grandes catégories, mais chacune présente des avantages et des inconvénients.
- Type de scan automatisé
Bien que l'extraction mécanique depuis la page entière soit efficace, il y a un risque de faux positifs et de détections manquées lorsque l'arrière-plan est une image ou un dégradé. - Type pipette (compte-gouttes)
Bien qu'il mesure avec précision les couleurs exactes telles qu'elles apparaissent, l'extraction manuelle point par point rend le processus coûteux en ressources. - Type sélection d'élément
Bien que simple car il accède directement aux informations HTML/CSS, il ne peut pas inspecter les images et ne peut pas toujours capturer correctement l'état de rendu réel, comme le chevauchement d'éléments ou la transparence.
C'est de cette question posée sur le terrain : « Existe-t-il une méthode qui serait simple, précise et capable de détecter partout ? » que le développement a démarré.
Une quatrième approche sans précédent
La réponse à cette question s'est concrétisée sous la forme de la « analyse de zones » dans Area Contrast Checker, une quatrième approche novatrice.
Sélectionnez la zone à analyser en la surlignant à la souris. L'outil analyse les pixels de cette zone et détecte automatiquement les deux couleurs : la couleur de fond et la couleur de premier plan. Puisque l'analyse porte sur ce que l'utilisateur voit réellement à l'écran, les chevauchements d'éléments n'ont aucune incidence et l'inspection d'images est également possible.
Il vous suffit de faire glisser votre souris sur la zone qui vous intéresse pour l'analyser facilement.
Fonctionnalités principales
▪️ Conformité WCAG 2.1 / 2.2
Sur la base des critères de succès 1.4.3, 1.4.6 et 1.4.11, l'outil évalue le ratio de contraste pour le texte normal (AA : 4,5:1, AAA : 7:1), le texte volumineux (AA : 3:1, AAA : 4,5:1) et les composants UI (AA : 3:1).
▪️ Support de la norme de nouvelle génération APCA
Conformité avec APCA (Accessible Perceptual Contrast Algorithm), le nouveau critère de contraste examiné dans le brouillon de WCAG 3.0. L'outil affiche instantanément jusqu'à quel niveau de taille de police la conformité est respectée (valeur Lc).
▪️ Suggestions de couleurs préservant la teinte
Lorsque le ratio de contraste est insuffisant, l'outil suggère une couleur approchée qui respecte les critères tout en préservant la teinte (Hue) de la couleur d'origine.
▪️ Fonctionnalités avancées pour les professionnels
• Support des formats de couleur HEX, RGB et HSL.
• Possibilité de raffiner les résultats de détection automatique en resélectionnant avec le sélecteur de couleur pixel par pixel.
• Support de deux langues : japonais et anglais.
Télécharger Area Contrast Checker
Chez Liberogic, nous nous efforçons de faire de l'accessibilité non pas une « mesure particulière », mais un « standard de qualité évident ».
Nous avons intégré dans cet outil toutes les fonctionnalités que nous aurions souhaité avoir lors de nos projets de création web et de diagnostics d'accessibilité. À l'avenir, nous continuerons à lancer régulièrement de nouveaux outils pour rendre l'accessibilité plus accessible et plus fluide. Restez à l'affût !
