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. L’information doit compréhensible même en l’absence de couleurs.
   Autrement dit, l’information ne doit pas être portée uniquement par la couleur. 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. Le contraste entre les couleurs est 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.

3. Le contour du focus doit être suffisemment contrasté avec l’arrière-plan. Si une bonne pratique consiste à conserver le contour du focus, celui-ci doit aussi être suffisemment contrasté avec l’arrière-plan.
   Une astuce consiste à implémenter en CSS un contour de focus faisant appel au noir pur (Code hexadécimal : #000000) et au blanc pur (code hexadécimal #FFFFFF).

:focus-visible {
    outline: 3px solid white;
    box-shadow: 0 0 0 6px black;
}

Application des critères de contraste

Les contrastes de couleurs concernent le rapport de contraste entre la couleur d’écriture d’un texte et sa couleur d’arrière-plan. Le RGAA impose seulement le respect du critère de contraste du niveau AA du WCAG.

Ces contrastes concernent :

• les textes HTML ;
• les textes présents dans les images ;
• les textes incrustés dans les vidéos.

Non application des 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 requis pour du texte (RGAA - niveau AA du WCAG)

Contraste de 4.5 pour 1

Le rapport de constraste entre la couleur de premier-plan et la couleur d’arrière-plan doit être de 4.5 pour 1 dans les cas suivants :

• Texte normal (non gras) dont la taille est strictement inférieure à 150% de la taille de police par défaut (soit 1.5em ou 18pt ou 24px).
• Texte en gras dont la taille est strictement inférieure à 120% de la taille de police par défaut (soit 1.2em ou 14pt ou 18.5px).

Contraste de 3 pour 1

Le rapport de constraste entre la couleur de premier-plan et la couleur d’arrière-plan doit être de 3 pour 1 dans les cas suivants :

• Texte normal (non gras) dont la taille est supérieure ou égale à 150% de la taille de police par défaut (soit 1.5em ou 18pt ou 24px).
• Texte en gras dont la taille est supérieure ou égale à 120% de la taille de police par défaut (soit 1.2em ou 14pt ou 18.5px).

Contraste augmenté pour du texte (niveau AAA du WCAG)

Il est possible d’améliorer encore ces contrastes grâce aux rapports de niveau AAA.

Contraste de 7 pour 1

Le rapport de constraste entre la couleur de premier-plan et la couleur d’arrière-plan doit être de 7 pour 1 dans les cas suivants :

• Texte normal (non gras) dont la taille est strictement inférieure à 150% de la taille de police par défaut (soit 1.5em ou 18pt ou 24px).
• Texte en gras dont la taille est strictement inférieure à 120% de la taille de police par défaut (soit 1.2em ou 14pt ou 18.5px).

Contraste de 4.5 pour 1

Le rapport de constraste entre la couleur de premier-plan et la couleur d’arrière-plan doit être de 4.5 pour 1 dans les cas suivants :

• Texte normal (non gras) dont la taille est supérieure ou égale à 150% de la taille de police par défaut (soit 1.5em ou 18pt ou 24px).
• Texte en gras dont la taille est supérieure ou égale à 120% de la taille de police par défaut (soit 1.2em ou 14pt ou 18.5px).

Contraste pour les éléments graphiques informatifs et interactifs

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 ;
• toute représentation de l’état d’un composant d’interface utilisateur (focus, frontière…)

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.

Tableau récapitulatif du ratio de contraste attendu