Alors que l'intérêt pour l'accessibilité web ne cesse de croître, nous poursuivons, à travers nos services de diagnostic d'accessibilité, le développement d'outils destinés à rendre les diagnostics « plus simples et plus lisibles ».
L'extension Chrome Area Contrast Checker en est la première réalisation.
Contexte du développement
Les vérificateurs de contraste traditionnels se répartissent en trois grandes catégories, chacune présentant ses avantages et ses inconvénients.
- Analyse automatique
Elle est efficace, car elle extrait mécaniquement l'ensemble de la page. Toutefois, lorsque l'arrière-plan est une image ou un dégradé, elle est sujette aux faux positifs et aux omissions de détection. - Pipette (sélection de couleur)
Elle mesure avec précision la couleur telle qu'elle apparaît, mais comme l'extraction se fait manuellement, point par point, la charge de travail peut vite devenir importante. - Sélection par élément
Elle est simple, car elle lit directement les informations HTML/CSS. En revanche, elle ne permet pas d'inspecter les images, et ne restitue pas toujours fidèlement l'état réel du rendu, notamment pour les chevauchements d'éléments ou la transparence.
Le projet est né d'une question posée sur le terrain : « Ne pourrait-on pas disposer d'une méthode simple, précise et utilisable partout ? »
Une quatrième approche inédite
C'est cette « réponse » que nous avons concrétisée sous la forme d'une quatrième approche : l'« analyse de zone » de Area Contrast Checker.
Sélectionnez la zone à examiner en la délimitant par glisser-déposer. Les pixels de cette zone sont analysés et les deux couleurs, celle de l'arrière-plan et celle du premier plan, sont détectées automatiquement. Comme l'outil porte sur ce que l'utilisateur voit réellement à l'écran, il tient compte des chevauchements d'éléments et permet aussi d'inspecter des images.
Il suffit de faire glisser le curseur sur la partie qui vous intéresse pour l'analyser facilement.
Fonctionnalités principales
▪️Vérification de conformité WCAG 2.1 / 2.2
Évalue le rapport de contraste pour le texte courant (AA : 4,5:1, AAA : 7:1), le texte de grande taille (AA : 3:1, AAA : 4,5:1) et les composants d'interface (AA : 3:1), conformément aux critères de réussite 1.4.3, 1.4.6 et 1.4.11.
▪️Prise en charge de la future norme APCA
Prend en charge l'APCA (Accessible Perceptual Contrast Algorithm), nouvelle référence de contraste à l'étude dans le brouillon WCAG 3.0. Affiche immédiatement jusqu'à quelle taille de police la conformité est atteinte (valeur Lc).
▪️Suggestion de couleurs conservant la teinte
Lorsque le rapport de contraste est insuffisant, propose une couleur proche qui respecte les critères tout en conservant la teinte (Hue) de la couleur d'origine.
▪️Fonctions avancées pour les professionnels
Prise en charge des formats de couleur HEX, RGB et HSL.
Pour affiner le résultat de la détection automatique, il est possible de resélectionner une couleur au pixel près avec la pipette.
Disponible en japonais et en anglais.
Télécharger Area Contrast Checker ici
Chez Liberogic, nous visons à faire de l'accessibilité non pas une « prestation spéciale », mais une qualité allant de soi.
Nous avons intégré dans cet outil ce que nous avons toujours souhaité disposer sur le terrain, lors de la création de sites web et des diagnostics d'accessibilité. Nous continuerons à publier progressivement des outils destinés à rendre l'accessibilité plus proche et plus fluide. Restez à l'écoute.
