Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 3.3 : Dans chaque page Web, chaque contraste de couleurs est-il suffisamment élevé (hors cas particuliers) ?

revenir en haut de la page

Carte d'identité du critère 3.3 [niveau AccessiWeb : Bronze]

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les pages Web doivent avoir des contrastes de couleurs suffisamment élevés (il y a une gestion de cas particuliers pour le critère 3.3).

Bénéfices pour les utilisateurs

• Une mauvaise association de couleurs ou un contraste insuffisant peuvent ralentir, voire empêcher la lecture de l'information pour des utilisateurs atteints 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

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique :
   • tous les éléments de texte
   • toutes les images porteuses d'information
   • tous les objets multimédia
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 3.3.a [Bronze] : Dans chaque page Web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
   • Test 3.3.b [Bronze] : Dans chaque page Web, le contraste entre les couleurs d'une image porteuse d'information et la couleur de fond de la page Web est-il suffisamment élevé (hors cas particuliers) ?
   • Test 3.3.c [Bronze] : Dans chaque image porteuse d'information, le contraste entre les couleurs porteuses d'information est-il suffisamment élevé (hors cas particuliers) ?
   • Test 3.3.d [Bronze] : Dans chaque page Web, le contraste entre les couleurs d'un objet multimédia porteur d'information et la couleur de fond de la page Web est-il suffisamment élevé (hors cas particuliers) ?
   • Test 3.3.e [Bronze] : Dans chaque objet multimédia porteur d'information, le contraste entre les couleurs porteuses d'information est-il suffisamment élevé (hors cas particuliers) ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 3.3.a [Bronze], le test 3.3.b [Bronze] et le test 3.3.c [Bronze] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Couleur" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Noir et Blanc"
  3. La page est affichée en niveaux de gris
  4. Vérifier que :
     • le contraste entre la couleur du texte et la couleur de son arrière-plan (hors cas particuliers)
     • le contraste entre les couleurs d'une image porteuse d'information et la couleur de fond de la page Web (hors cas particuliers)
     • le contraste entre les couleurs porteuses d'information dans chaque image porteuse d'information (hors cas particuliers)
     est suffisamment élevé
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 3.3.d [Bronze] et le test 3.2.e [Bronze] :
  1. Ces tests ne sont pas évaluables par la Barre d'outils Accessibilité du Web (version 2.0 beta).

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

Pour le test 3.3.a [Bronze], le test 3.3.b [Bronze], le test 3.3.c [Bronze], le test 3.3.d [Bronze] et le test 3.3.e [Bronze] :

1. Ces tests ne sont pas évaluables par la Barre d'Outils Web Developper (version 1.1.4).

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

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'y 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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 2.1) : Don't rely on color alone
• WAI 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

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.