Directive 2. S'assurez que l'information n'est pas fournie à travers les couleurs seulement.
Utilisez les propriétés CSS pour spécifier les couleurs :
- 'color', pour la couleur de premier plan du texte.
- 'background-color', pour les couleurs de fond.
- 'border-color', 'outline-color' pour les couleurs de bordure.
- pour les couleurs de liens, voir les pseudo-classes :link, :visited, et :active.
Test rapide ! Pour tester si votre document continue à fonctionner sans les couleurs, examiner le avec un écran monochrome ou les couleurs du navigateur désactivées. Essayez également un schéma de couleur dans votre navigateur qui n'utilisent que le noir, le blanc, et les quatres gris des navigateurs et voyez si vos pages sont toujours consistantes.
- Règle 2.1
- S'assurez que toute information définie par les couleurs est également disponible sans couleur, par exemple à partir du contexte ou du balisage. [Priorité 1]
Pour en savoir plus :
http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/#style-colorsExplications :
Proscrivez les textes sur des fonds texturés et faites attention à avoir un contraste suffisamment fort entre la couleur du texte et la couleur de fond.
Si certaines informations contenues dans votre site sont identifiables grâce à leur couleur, avez-vous pensé à prévoir un autre moyen ? Par exemple, quand vous demandez une entrée de la part des utilisateurs, n'écrivez pas "Sélectionnez un élément parmi la liste de ceux qui sont en vert." A la place , s'assurez que l'information est disponible à d'autres effets de style (ex., un effet de police) et à travers le contexte (ex., des liens textes explicites). - Règle 2.2
- S'assurer que les combinaisons de couleurs de premier plan et de fond fournissent un contraste suffisant lorsqu'elles sont vues par quelqu'un ayant des déficiences sur la couleur ou si elles sont vues sur un écran noir et blanc. [Priorité 2 pour les images, Priorité 3 pour le texte]
Explications :
Pour tester si le contraste de couleur est suffisant pour être lu par des personnes avec des déficiences de couleur ou par ceux qui ont des écrans avec de basses résolutions, imprimer les pages sur une imprimante noir et blanc (avec les fonds et les couleurs apparaissant en niveau de gris). Essayez également de prendre la sortie et de la photocopier itérativement 2 à 3 fois pour voir comment la copie se dégrade. Cela vous montrera si vous avez besoin d'ajouter des informations redondantes (exemples : des hyperliens qui sont habituellement soulignés sur les pages web), ou si les information sont trop petites ou indistinctes pour être traitées correctement.
Tableau des directives et des points de contrôles :
| N° de Directive | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Total |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Level A - Priorité 1 | 4 | 1 | 0 | 1 | 2 | 3 | 1 | 1 | 1 | 0 | 1 | 1 | 0 | 1 | 17 |
| Level AA - Priorité 2 | 0 | 1* | 7 | 0 | 2 | 2 | 4 | 1** | 2 | 2 | 2 | 3 | 4 | 0 | 30 |
| Level AAA - Priorité 3 | 5 | 2 | 7 | 3 | 6 | 5 | 5 | 1 | 5 | 5 | 4 | 4 | 10 | 3 | 65 |
* Considéré comme Priorité 2 pour les images et Priorité 3 pour le texte.
** Priorité 1 si la fonctionnalité est importante et n'est pas présenté ailleurs, sinon Priorité 2
