# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

- Bénéfice 1 :
  Une mauvaise association de couleurs ou un contraste insuffisant peut ralentir, voire empêcher la lecture de l'information pour des utilisateurs atteintes de daltonisme et ne percevant pas certaines couleurs.
  Il est conseillé de proposer une différence d'intensité suffisante entre la couleur du contenu au premier plan et la couleur du fond.
  Il est également conseillé d'éviter certaines combinaisons de couleurs comme le rouge / bleu, jaune / violet, jaune / vert, ...

#### 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

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

- Fiche 3.1 : L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?

#### Autres ressources

- html Techniques (section 2.1) : Don't rely on color alone
- Web Content Accessibility Curriculum (section 2.2) : Ensure that foreground and background color combinations provide sufficient contrast
- Théories et explications sur la couleur (pourpre.com) : La couleur expliquée
- Outil de vérification des couleurs :
  - Colour Contrast Analyser
  - Colour Contrast Check
  - Outil d'analyse des contrastes de couleurs version 1.0

revenir au sommaire de la fiche

revenir en haut de la page

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