retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Couleurs > Fiche 3.2

Fiche 3.2 : Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?

Carte d'identité

  • Critère AccessiWeb : 3.2
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 2.2

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Par le code source

Ce critère n'est pas évaluable par l'étude du code source.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la barre AccessiWeb (version 1.0) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "3. Couleurs" de la Barre AccessiWeb, activer le critère 3.2.
  3. La page est rechargée sans couleurs en niveau de gris.
  4. Vérifier à l'oeil nu si les contrastes sont suffisants pour qu'il n'y ait aucune perte d'information.
    Note: Pour réactiver les couleurs de la page, recharger la page en cliquant sur la touche F5.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Cliquer sur l'option "Niveau de gris" du menu "Couleurs".
  2. Contrôler à l'œil nu si les contrastes sont suffisants.
  3. Pour rétablir les couleurs, recharger la page en appuyant sur la touche F5.

Note : La Web Accessibility Toolbar version 1.2 propose d'utiliser l'outil "Colour Contrast Analyser" pour tester la différence de contraste et dintensité entre deux couleurs données. A titre indicatif, cet outil peut être utilisé comme suit :
  1. Cliquer sur l'option "outil d'analyse des contrastes [Nouvelle fenêtre]" du menu "Couleurs".
  2. L'outil s'affiche dans une petite fenêtre et permet de selectionner une couleur de premier plan et d'arrière-plan : au moyen de listes de couleurs prédéfinies, par leur valeur hexadécimale (Exemple : #000000) ou par l'intermédiaire d'une "pipette".
  3. Lorsque les deux couleurs à tester sont choisies, le résultat apparaît automatiquement sous la forme d'un texte indiquant si le contraste est "suffisant" ou "pas suffisant" avec des informations explicatives.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
Ce critère n'est pas évaluable par la barre d'outils Web Developer version 1.0.2 pour Firefox.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

Le graphiste doit veiller au bon choix des couleurs et d'un contraste suffisamment élevé.

Il n'y a pas d'étude de cas pour cette fiche. L'illustration ci-dessous donne un exemple de ce qu'il FAUT éviter de faire.

Implémentation

De manière générale, il est conseillé d'éviter la multiplication des palettes de couleurs sur une page. Toutefois, une des méthodes les plus réaliste consiste à recueillir, à partir d'une page type, l'avis d'un panel d'utilisateurs ayant ou non des difficultés à percevoir les couleurs.
L'autre approche, complémentaire, consiste à utiliser un outil d'analyse des contrastes de couleurs, comme ceux proposés dans la section "Références" de cette fiche.

Exemple de mauvaise pratique

Il n'a d'exemple pour cette rubrique.

Exemple de bonne pratique

Il n'y a pas d'exemple pour cette rubrique.

revenir en haut de la page

Illustrations

images dont les contrastes sont peu élevés

Sur cette image, les zones pour lesquelles le contraste n'est pas suffisant, sont entourées d'un cercle.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 3.1 Fiche suivante : fiche 4.1

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact