Accessibilité des couleurs

Il existe deux grandes règles concernant l'accessibilité des couleurs. La première est que la couleur ne doit pas être le seul moyen de véhiculer de l'information. La deuxième concerne le contraste des couleurs entre l'avant-plan et l'arrière-plan qui doit être suffisamment accentué pour permettre une bonne lisibilité du contenu.

Ce qu’il faut retenir

1. Veiller à ce que l’information soit compréhensible même en l’absence de couleurs.
   La couleur ne doit jamais être la seule façon de véhiculer une information, d’indiquer une action…
   Une personne daltonienne, par exemple, ne perçoit pas la couleur rouge. Si, dans un formulaire, vous demandez à ce que les champs signalés en rouge soient obligatoirement renseignés, cette dernière ne saura pas quels champs absolument renseigner.
   Pour présenter un graphique, on pourra, par exemple, recourir à des lignes ou des secteurs avec des motifs.

2. Veiller à ce que le contraste entre les couleurs soit suffisamment accentué pour permettre une bonne lisibilité du contenu
   Un contraste insuffisant est une des erreurs les plus fréquentes en matière d’accessibilité numérique. Les personnes astigmates ou les personnes âgées, par exemple, perçoivent moins bien les contrastes que les autres personnes.

Contraste requis entre les textes et l’arrière-plan

Le RGAA impose seulement le respect du critère de contraste du niveau AA du WCAG.

Contraste minimal requis (niveau AA du WCAG)

Le rapport de constraste à respecter est le suivant :

• Texte normal non gras inférieur à 18pt : rapport de 4.5 pour 1
• Texte normal gras inférieur à 14pt : rapport de 4.5 pour 1
• Grand texte non gras inférieur à 18pt : rapport de 3 pour 1
• Grand texte gras inférieur à 14pt : rapport de 3 pour 1

Contraste augmenté (niveau AAA du WCAG)

Le rapport de constraste à respecter est le suivant :

• Texte normal non gras inférieur à 18pt : rapport de 7 pour 1
• Texte normal gras inférieur à 14pt : rapport de 7 pour 1
• Grand texte non gras inférieur à 18pt : rapport de 4.5 pour 1
• Grand texte gras inférieur à 14pt : rapport de 4.5 pour 1

Cas de non application de ces critères de contraste

Les critères sont non applicables dans les cas suivants :

• Le texte fait partie d’un logo ou d’un nom de marque d’un organisme ou d’une société ;
• Le texte ou l’image de texte est purement décoratif ;
• Le texte fait partie d’une image véhiculant une information mais le texte lui-même n’apporte aucune information essentielle ;
• Le texte ou l’image de texte fait partie d’un élément d’interface sur lequel aucune action n’est possible (par exemple un bouton avec l’attribut disabled).

Contraste minimal entre les éléments graphiques informatifs et interactifs et l’arrière-plan

Les éléments graphiques sont :

• des pictogrammes informatifs  ;
• des pictogrammes interactifs seuls, lorsqu’ils ne sont pas accompagnés d’un texte  ;
• des bordures de champs de formulaire  ;
• des onglets.

Ce critère de contraste minimum s’applique aussi à deux éléments juxtaposés. Ainsi, si vous voulez ne pas souligner par défaut les liens mais les rendre repérable par la couleur (et un élément visuel supplémentaire comme le gras par exemple - n’oubliez pas : l’information de doit pas être véhiculée uniquement par la couleur), vous devez veiller à ce que le contraste de couleur entre le texte et le lien soit conforme à ce critère.

Pour ces éléments, le rapport de contraste minimum à atteindre est de 3 pour 1, quel que soit le niveau du WCAG visé (AA ou AAA).

Tableau récapitulatif du ratio de contraste attendu