Contraste et couleurs
Information non uniquement par la couleur, ratios de contraste texte et composants (thématique 3).
Chapitres
Transcription
Texte intégral de la narration de l’épisode.
Situations du quotidien
Tu as déjà loupé une erreur de formulaire parce qu’elle n’était indiquée qu’en rouge ? Ou forcé pour lire un texte gris sur blanc ? Ou deviné une légende de graphique uniquement par la couleur ? La thématique Couleurs du RGAA traite exactement ça : l’information ne doit pas reposer sur la couleur seule, et les contrastes doivent rester lisibles.
Contraste et couleurs
Dans le RGAA 4.1.2, la thématique Couleurs regroupe trois critères. Le 3.1 : l’information ne doit pas être donnée uniquement par la couleur. Le 3.2 : le contraste entre le texte et son fond doit être suffisant. Le 3.3 : les composants d’interface et les éléments graphiques porteurs d’information doivent aussi être assez contrastés. On va voir chacun avec des exemples concrets.
Couleur seule
Premier point, le critère 3.1. Si ton seul moyen de dire qu’un champ est en erreur, c’est de le colorer en rouge, une partie des gens ne le verra pas. La bonne pratique : doubler la couleur avec du texte, une icône, une forme. La couleur peut renforcer le message. Elle ne doit pas le porter toute seule. C’est valable pour les graphiques, les pastilles de statut, les cartes, les calendriers… Deuxième point, le contraste du texte, critère 3.2. On mesure un ratio entre la couleur du texte et celle du fond. Pour un texte courant, le seuil usuel est de quatre virgule cinq pour un. Un gris clair sur blanc tombe souvent en dessous. Un texte presque noir sur blanc passe largement. Pour le grand texte, le seuil peut être plus bas, selon les conditions du référentiel. L’idée simple : si tu plisses les yeux pour lire, c’est déjà un signal d’alarme. En CSS, le piège est classique : un gris « élégant » sur fond blanc. En code, ça tient en deux lignes. En usage, ça fatigue ou ça exclut. Pense aussi aux textes posés sur des images et aux liens non soulignés. Les boutons désactivés, eux, sont exemptés par le référentiel, mais tes utilisateurs les lisent quand même : autant viser lisible. Le design system doit fixer des paires de couleurs validées, pas laisser chaque écran improviser. Troisième point, le critère 3.3. Les boutons, icônes, barres de progression, pastilles de statut : s’ils portent une information, leur contraste compte aussi. Le seuil usuel pour ces éléments graphiques est souvent de trois pour un. Une icône grise fondue dans le fond, un bouton à peine visible : même combat que le texte trop pâle.
Checklist
Avant de valider un écran, pose-toi quatre questions. L’info d’état est-elle compréhensible sans la couleur ? Le texte courant est-il assez contrasté ? Les composants et graphiques informatifs le sont-ils aussi ? As-tu regardé les états hover, focus, et le texte sur image ? Si tu coches ces cases, tu couvres déjà l’essentiel de la thématique Couleurs.
À retenir
À retenir. Couleur seule, non. Contraste du texte, oui. Contraste des composants, aussi. Ancre ça dans ton design system pour ne pas le redécouvrir écran par écran. Dans l’épisode suivant, on regarde le clavier : focus, ordre de tabulation, et actions sans souris.
CTA
Si tu veux analyser une page et relier les pistes d’amélioration aux critères du RGAA, rendez-vous sur rgaa-checker.com. On se retrouve pour le clavier.
Approfondir dans le guide
Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.
Passer à l’action
La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.