Outil d'analyse des contrastes de couleurs version 1.0

Qu'est-ce que l'outil d'analyse des contrastes de couleurs?

C'est un outil permettant de vérifier les combinaisons de couleurs de premier plan et d'arrière-plan afin de déterminer si elles donnent une bonne visibilité de couleurs. Cette identification de la bonne "visibilité des couleurs" se base sur les algorithmes proposés par le World Wide Web Consortium (W3C)

"On considère que deux couleurs donnent une bonne visibilité de couleurs si la différence d'intensité et la différence de couleurs entre les deux couleurs sont suppérieures à une gamme donnée." La gamme proposée par le W3C est > 125 pour l'intensité des couleurs et > 500 pour la différence de couleurs.

Note: Hewlett Packard (HP) propose un outil en ligne de vérification des contrastes de couleurs utilisant les algorithmes du W3C, mais qui définit la gamme de différence de couleurs à > 400, ce qui entraîne une plus grande gamme jugée acceptable de combinaisons de couleurs de premier plan et d'arrière-plan.

Haut

Formule d'intensité des couleurs

L'intensité des couleurs est déterminée par la formule suivante:

((Composante rouge X 299) + (composante verte X 587) + (composante bleue X 114)) / 1000

La différence d'intensité entre le premier plan et l'arrière-plan devrait être supérieure à 125.

Note: Cet algorithme est issu d'une formule de conversion des composantes RGB (rouge, vert bleu) dans des composantes YIQ(luminance, interpolation, quadrature). Cette composante d'intensité donne une intensité perçue pour une couleur donnée.

Haut

Formule de différence de couleurs

La différence de couleurs est déterminée par la formule suivante

(maximum (composante rouge 1, composante rouge 2) - minimum (composante rouge 1, composante rouge 2)) + (maximum (composante verte 1, composante verte 2) - minimum (composante verte 1, composante verte 2)) + (maximum (composante bleue 1, composante bleue 2) - minimum (composante bleue 1, composante bleue 2))

La différence entre la couleur d'arrière-plan et la couleur du premier plan devrait être suppérieure à 500.

Haut

Utilisations

L'outil d'analyse des contrastes de couleurs (CCA) est utile pour permettre de déterminer notamment la lisibilité d'un texte sur une page Web et la lisibilité de représentations textuelles sous forme d'images.

Evaluation de la conformité au point de contrôle 2.2 des recommandations Web Content Accessibility Guidelines 1.0

Le point de contrôle 2.2 des WCAG 1.0 exige que

les combinaisons de couleurs du premier plan et de l'arrière-plan offrent un contraste suffisant lorsqu'elles sont vues par quelqu'un qui a des difficultés pour voir les couleurs, ou lorsqu'elles sont visualisées sur un écran noir et blanc.

Utilisez l'outil d'analyse des contrastes de couleurs pour tester les combinaisons de couleurs en fonction de l'algorithme proposé par le W3C afin de déterminer si le contraste est suffisant".

Haut

Utilisation de l'outil d'analyse des contrastes de couleurs

L'interface utilisateur comporte quatre sections

  1. Choix des couleurs
  2. Résultats
  3. Résultats pour le daltonisme
  4. Options et aide

1. Choix des couleurs

Les éléments de choix des couleurs sont divisés en deux sections (premier plan et arrière-plan) avec pour chacune d'elles trois façons de choisir une couleur à tester.

interface utilisateur pour le choix des couleurs

  1. La palette de couleurs inférieure (la plus petite) est composée de dix nuances de la couleur de base actuellement sélectionnée, située en haut à gauche à des niveaux d'opacité variés. La rangée suppérieure émule l'opacité sur un fond blanc, la rangée inférieure sur un fond noir. Les valeurs d'opacité sont opaque à 100%, 75%, 50%, 25% et 10% sur la rangée supérieure. La rangée inférieure commence à 85% au lieu de 100% et continue ensuite comme la rangée précédente.

    palettte de couleurs

    La palette de couleurs inférieure (la plus petite) est composée de dix nuances de la couleur de base actuellement sélectionnée, située en haut à gauche à des niveaux d'opacité variés. La rangée suppérieure émule l'opacité sur un fond blanc, la rangée inférieure sur un fond noir. Les valeurs d'opacité sont opaque à 100%, 75%, 50%, 25% et 10% sur la rangée supérieure. La rangée inférieure commence à 85% au lieu de 100% et continue ensuite comme la rangée précédente.

    Cette palette est utile pour tester des nuances plus légères et plus sombres de la couleur de base, qui peuvent améliorer la visibilité de la combinaison de couleurs en cours de test.

    Note: Cette fonctionnalité est issue du créateur de palettes de couleurs.

  2. Saisie d'une valeur de couleur (au format Hexadecimal) dans une boîte d'édition. Ceci est utile si vous avez accès aux valeurs hexadécimales des couleurs que vous souhaitez vérifier.

    boîte d'édition d'une valeur hexadécimale

  3. Choix d'une couleur dans une page web (ou n'importe où à l'écran) à l'aide de la pipette accompagnée de son zoom. bouton de modèle de couleurs

    Ceci est utile pour choisir, vérifier et obtenir rapidement les valeurs hexadécimales des couleurs. Une fois que le bouton du choix des couleurs est sélectionné une zone agrandie apparaîtra autour du curseur. La couleur du contenu se trouvant sous le curseur apparaîtra dans la boîte de sélection de la palette de couleurs.

    Une fois qu'une couleur a été choisie à l'aide de l'échantillonneur de couleurs (clic gauche de la souris ou touche entrée) sa valeur hexadécimale apparaîtra dans la boîte d'édition 'valeur hexadécimale' et la section des résultats sera mise à jour pour indiquer l'intensité et les différences de couleurs pour la combinaison de couleurs actuellement sélectionnée.

    Note: Pour corriger le positionnement du curseur utilisez les flèches de direction.

    Exemple de la zone agrandie autour du curseur qui apparaît lorsque le sélecteur de couleurs est activé. La couleur sous le marqueur du curseur aparaît dans la boîte d'édition de la palette de couleurs

2. Résultats

La section des résultats est divisée en un résumé des résultats et les résultats complets.

Le 'Résumé des résultats' donne une valeur pour l'intensité et la différence de couleurs.

résumé des résultats

Une coche indique si tous deux ont été validés. Une croix indique si aucun n'est valide.

Les 'résultats complets' affichent les valeurs pour chaque vérification et quels sont les critères de réussite ou d'échec et indiquent si le contraste est considéré comme suffisant/insuffisant.

Note: Le texte des résultats résumés et complets peut être sélectioné et copié.

La section des résultats de l'outil d'analyse des contrastes de couleurs

3. Résultats pour le daltonisme

La sélection de la case à cocher 'montrer aussi les résultats des contrastes pour le daltonisme' affichera les résultats résumés pour la 'vision ordinaire' et trois types de daltonisme (la Protanopie, la Deutéranopie, la Tritanopie)

affichage des résultats pour le daltonisme

Note: La méthode pour déterminer les transformations des valeurs de couleurs pour les trois types de déficience des couleurs est tirée d'un algorithme décrit par Hans Brettel, Françoise Vienot et John Mollon dans un article publié dans le Journal of the Optical Society of America V14, #10 pp2647.

Tous nos remerciements aux aimables personnes de Vischeck qui nous ont permis d'accéder au code source de leur outil d'application de l'algorithme de Brettel.

4. Options et Menus d'aide

La sélection de l'élément de menu 'toujours au premier plan' laissera la fenêtre de l'outil d'analyse des contrastes de couleurs par-dessus toutes les autres fenêtres ouvertes. Le choix de l'élément de menu "polices" ouvre une boîte de dialogue vous permettant de modifier la police utilisée pour les intitulés de textes et le contenu de l'outil d'analyse des contrastes de couleurs

Note: La sélection de certains types ou tailles de polices peut entraîner des problèmes d'affichage de contenu textuel.

Options menu

La sélection de l'élément de menu "aide" menu aide ouvrira la page web sur la documentation de l'outil d'analyse des contrastes de couleurs dans une nouvelle fenêtre de navigateur.

Note: Il vous faudra être connecté à Internet pour accéder à la documentation.

Haut

Utilisation par le clavier

Raccourcis clavier pour l'outil d'analyse des contrastes de couleurs
FonctionTouche(s)
Ouvrir la/les palette(s) de couleurs du premier planF9
ouvrir la/les palette(s) de couleurs de l'arrière-planF10
se déplacer dans les palettes de couleursflèches directionnelles ou touche de tabulation
activer le sélecteur de couleur de premier planF11
activer le sélecteur de couleurs d'arrière-planF12
déplacer le sélecteur de couleursflèches de directions
choisir une couleur dans le sélecteur ou dans la paletteEntrée

Haut

Notice sur les Conditions d'utilisation:

L'outil d'analyse des contrastes de couleurs est un logiciel gratuit.

En accédant à ou en utilisant l'outil d'analyse des contrastes de couleurs vous reconnaissez que vous avez lu, compris et vous acceptez d'être lié(e) aux conditions d'utilisation de l'outil d'analyse des contrastes de couleurs et aux conditions d'utilisation du site Vision Australia.

CE LOGICIEL EST FOURNI "TEL QUEL", SANS AUCUNE GARANTIE EXPLICITE OU IMPLICITE. EN PARTICULIER, Vision Australia NE FAIT AUCUNE REPRESENTATION OU GARANTIE DE QUELQUE SORTE A PROPOS DE LA FIABILITE, LA QUALITE OU LA MERCANTIBILITE DE CE LOGICIEL OU SON APTITUDE POUR TOUT OBJECTIF PARTICULIER. DE PLUS, NILS NE GARANTIT PAS QUE L'UTILISATION DE CE LOGICIEL PERMETTRA L'ACCESSIBILITE DE VOS CONTENUS WEB OU QUE VOS CONTENUS WEB SERONT CONFORMES A TOUS STANDARDS SPECIFIQUES DE L'ACCESSIBILITE DU WEB.

Ce travail est sous la licence Creative Commons License Creative Commons Licence.

Haut

Instructions pour le téléchargement et l'installation

Veuillez noter: L'outil d'analyse des contrastes de couleurs ne contient aucun logiciel espion.

Configuration requise

Téléchargez

Instuctions d'installation

Téléchargez, dézippez et placez le répertoire CCA à l'endroit qui vous convient. Utilisez l'application en exécutant le fichier Colour_Contrast_Analyser.exe.

Haut

A propos

L'outil d'analyse des contrastes de couleurs a été développé par JUn de Wrong HTML Wrong Html en collaboration avec Steve Faulkner de Vision Australia.

Son développement a été inspiré par le Colour Contrast Analyser (outil d'analyse des contrastes de couleurs) de Juicy Studio, l'outil de vérification des contrastes de couleurs de HP et le programme de test de visibilité des couleurs par Chris Ridpath de l'université de Toronto

Merci à Gez Lemon de Juicy Studio pour l'utilisation du contenu de son outil d'analyse des contrastes de couleurs en ligne.

Traduction

Braillenet logo BrailleNet

Nous remercions particulièrement Sylvie Duchateau pour la traduction rançaise de la documentation et de l'interface de l'outil. Merci également à Matthieu Faure pour sa relecture des documents.

Pour donner votre avis sur l'outil d'analyse des contrastes de couleurs envoyez un email à:

Sylvie Duchateau (version française)

Email
info@accessiweb.org

Steven Faulkner (English version)

Email
steven.faulkner@nils.org.au

JUn (Japanese version)

Email
jun@idena.jp

Juan Fuertes (Version española)

Email
juan.fuertes@dnxgroup.com

Roberto Castaldo (versione italiana)

Email
rcastaldo@webaccessibile.org

Jedi (Chinese versions)

Email
JediLin@Gmail.com

Juha-Markku Liikala (Suomenkielinen versio)

Email
rcastaldo@webaccessibile.org

Top