Thématique 3 · Couleurs

Critère RGAA 3.3 : Contraste des composants et graphiques

Une bordure de champ, une icône ou une courbe trop pâle n'est pas perçue par les personnes malvoyantes : elles ne voient pas où cliquer ni ce que montre le graphique.

Niveau

AA

WCAG 2.2

1.4.11

Thématique

Couleurs

Vérification

Détection partielle

La question posée par le RGAA

Dans chaque page web, les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ?

Comment respecter ce critère

• Donnez aux bordures de champs, icônes, états des boutons et éléments de graphique un contraste d'au moins 3:1 avec leur fond.
• Vérifiez aussi les états : case cochée, onglet actif, focus.

Mesurez vos couleurs avec le vérificateur de contraste gratuit : ratio, verdict AA / AAA et couleur conforme la plus proche.

Exemple

Le contraste des composants d'interface / éléments graphiques porteurs d'information est insuffisant (< 3:1).

border: 1px solid #e0e0e0; /* champ ~1.3:1 sur blanc */

border: 1px solid #767676; /* ~4.5:1 */

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

1. 3.3.1 — Dans chaque page web, le rapport de contraste entre les couleurs d’un composant d’interface dans ses différents états et la couleur d’arrière-plan contiguë vérifie-t-il une de ces conditions (hors cas particuliers) ? (Le rapport de contraste est de 3:1, au moins ; Un mécanisme permet un rapport de contraste de 3:1, au moins.)
2. 3.3.2 — Dans chaque page web, le rapport de contraste des différentes couleurs composant un élément graphique, lorsqu’elles sont nécessaires à sa compréhension, et la couleur d’arrière-plan contiguë, vérifie-t-il une de ces conditions (hors cas particuliers) ? (Le rapport de contraste est de 3:1, au moins ; Un mécanisme permet un rapport de contraste de 3:1, au moins.)
3. 3.3.3 — Dans chaque page web, le rapport de contraste des différentes couleurs contiguës entre elles d’un élément graphique, lorsqu’elles sont nécessaires à sa compréhension, vérifie-t-il une de ces conditions (hors cas particuliers) ? (Le rapport de contraste est de 3:1, au moins ; Un mécanisme permet un rapport de contraste de 3:1, au moins.)
4. 3.3.4 — Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, les couleurs du composant ou des éléments graphiques porteurs d’informations qui le composent, sont-elles suffisamment contrastées ?

Source : RGAA 4.1.2, critère 3.3, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement une partie des manquements à ce critère et les signale « à confirmer » ; la revue guidée vous fait vérifier le reste avec les tests officiels.