{"id":106,"date":"2026-02-09T10:41:53","date_gmt":"2026-02-09T08:41:53","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=106"},"modified":"2026-02-09T10:41:53","modified_gmt":"2026-02-09T08:41:53","slug":"chapitre-3-du-rgaa-couleurs-garantir-une-information-perceptible-par-tous","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-3-du-rgaa-couleurs-garantir-une-information-perceptible-par-tous\/","title":{"rendered":"Chapitre 3 du RGAA : Couleurs \u2013 garantir une information perceptible par tous"},"content":{"rendered":"<h2><span style=\"text-decoration: underline;\">Introduction<\/span><\/h2>\n<p class=\"isSelectedEnd\">Le chapitre 3 du RGAA est consacr\u00e9 \u00e0 l\u2019usage des couleurs dans les interfaces num\u00e9riques. Il r\u00e9pond \u00e0 un <strong>enjeu fondamental<\/strong> : s\u2019assurer que l\u2019information reste compr\u00e9hensible, m\u00eame pour les personnes qui ne per\u00e7oivent pas les couleurs de mani\u00e8re classique.<\/p>\n<p class=\"isSelectedEnd\">Les difficult\u00e9s li\u00e9es aux couleurs concernent notamment :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Les personnes daltoniennes<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les personnes malvoyantes<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les utilisateurs en situation de fatigue visuelle<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les usages en conditions d\u00e9grad\u00e9es (luminosit\u00e9 faible, \u00e9cran de mauvaise qualit\u00e9)<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\"><strong>Ce chapitre ne vise pas \u00e0 limiter la cr\u00e9ativit\u00e9 graphique, mais \u00e0 \u00e9viter que la couleur devienne le seul moyen de comprendre une information.<\/strong><\/p>\n<h2><span style=\"text-decoration: underline;\">Principe fondamental : la couleur ne doit jamais \u00eatre la seule source d\u2019information<\/span><\/h2>\n<p class=\"isSelectedEnd\">C\u2019est la r\u00e8gle centrale du chapitre.<\/p>\n<p class=\"isSelectedEnd\">Si une information est donn\u00e9e uniquement par la couleur, certains utilisateurs ne pourront pas la percevoir.<\/p>\n<p class=\"isSelectedEnd\">Exemples probl\u00e9matiques :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Les champs obligatoires affich\u00e9s seulement en rouge<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les liens diff\u00e9renci\u00e9s uniquement par une couleur diff\u00e9rente<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les graphiques dont la lecture repose uniquement sur des codes couleur<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">Il faut toujours ajouter un autre indicateur visuel ou textuel.<\/p>\n<h4>Exemple 1 : champ obligatoire dans un formulaire<\/h4>\n<h4>Non conforme<\/h4>\n<pre><code>&lt;label style=\"color:red;\"&gt;Nom&lt;\/label&gt;<\/code><br><code>&lt;input type=\"text\"&gt;<\/code><\/pre>\n<p>Ici, seul le rouge indique que le champ est obligatoire.<\/p>\n<h4>Conforme<\/h4>\n<pre><code>&lt;label for=\"nom\"&gt;Nom\u00a0<\/code><br><code>\u00a0 \u00a0&lt;span aria-hidden=\"true\"&gt;*&lt;\/span&gt;<\/code><br><code>&lt;\/label&gt;<\/code><br><code>&lt;input id=\"nom\" type=\"text\" required aria-required=\"true\"&gt;<\/code><\/pre>\n<p>Am\u00e9liorations :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">L\u2019ast\u00e9risque compl\u00e8te l\u2019information visuelle<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">L\u2019attribut <code>required<\/code> est natif<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><code>aria-required=\"true\"<\/code> renforce l\u2019information pour les technologies d\u2019assistance<\/p>\n<\/li>\n<\/ul>\n<h4>Exemple 2 : message d\u2019erreur signal\u00e9 uniquement par la couleur<\/h4>\n<h4>Non conforme<\/h4>\n<pre><code>&lt;p style=\"color:red;\"&gt;Mot de passe incorrect&lt;\/p&gt;<\/code><\/pre>\n<p>Si l\u2019utilisateur ne per\u00e7oit pas le rouge, il peut ne pas comprendre qu\u2019il s\u2019agit d\u2019une erreur.<\/p>\n<h4>Conforme<\/h4>\n<pre><code>&lt;p role=\"alert\"&gt; Erreur : le mot de passe saisi est incorrect &lt;\/p&gt;<\/code><\/pre>\n<p>Am\u00e9liorations :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Le mot \u00ab Erreur \u00bb explicite le message<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><code>role=\"alert\"<\/code> permet au lecteur d\u2019\u00e9cran d\u2019annoncer imm\u00e9diatement l\u2019information<\/p>\n<\/li>\n<\/ul>\n<h2><span style=\"text-decoration: underline;\">Les contrastes de couleurs : un crit\u00e8re essentiel<\/span><\/h2>\n<p class=\"isSelectedEnd\">Le RGAA impose un contraste suffisant entre :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Le texte et l\u2019arri\u00e8re-plan<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Les \u00e9l\u00e9ments interactifs et leur environnement<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">Un contraste trop faible rend la lecture difficile, voire impossible.<\/p>\n<h4>Exemple : texte peu lisible (non conforme)<\/h4>\n<pre><code>&lt;p style=\"color:#aaa; background:#fff;\"&gt; Texte informatif &lt;\/p&gt;<\/code><\/pre>\n<p>Gris clair sur fond blanc : difficile \u00e0 lire.<\/p>\n<h4>Exemple am\u00e9lior\u00e9<\/h4>\n<pre><code>&lt;p style=\"color:#333; background:#fff;\"&gt; Texte informatif &lt;\/p&gt;<\/code><\/pre>\n<p>Le texte devient nettement plus lisible.<\/p>\n<h4>Exemple 3 : lien identifiable uniquement par la couleur<\/h4>\n<h4>Non conforme<\/h4>\n<pre><code>&lt;p&gt; Consultez notre &lt;span style=\"color:blue;\"&gt;guide pratique&lt;\/span&gt; &lt;\/p&gt;<\/code><\/pre>\n<p>Sans soulignement, un utilisateur peut ne pas identifier le lien.<\/p>\n<h4>Conforme<\/h4>\n<pre><code>&lt;p&gt; Consultez notre &lt;a href=\"\/guide\"&gt;guide pratique&lt;\/a&gt; &lt;\/p&gt;<\/code><\/pre>\n<p>Le lien est reconnaissable gr\u00e2ce \u00e0 :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Le soulignement<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Le comportement interactif<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Le r\u00f4le s\u00e9mantique du lien<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">Pas besoin d\u2019ARIA ici : le HTML fait le travail.<\/p>\n<h4>Exemple 4 : graphique bas\u00e9 uniquement sur des couleurs<\/h4>\n<p class=\"isSelectedEnd\">Un graphique avec des segments rouges et verts peut \u00eatre difficile \u00e0 comprendre pour un daltonien.<\/p>\n<h5>Am\u00e9lioration possible :<\/h5>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Ajouter des motifs<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Ajouter des \u00e9tiquettes textuelles<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Fournir une l\u00e9gende explicite<\/p>\n<\/li>\n<\/ul>\n<pre class=\"language-html\"><code>&lt;img src=\"graphique-ventes.png\" \n   alt=\"Graphique : les ventes augmentent de 20 % au premier trimestre\" \n   aria-describedby=\"legende-graph\"&gt; \n&lt;p id=\"legende-graph\"&gt; Les barres pleines repr\u00e9sentent 2023, \nles barres hachur\u00e9es repr\u00e9sentent 2024. &lt;\/p&gt;<\/code><\/pre>\n<p class=\"isSelectedEnd\">Ici, l\u2019information ne repose plus uniquement sur la couleur.<\/p>\n<h4>Exemple 5 : \u00e9tat d\u2019un \u00e9l\u00e9ment indiqu\u00e9 par la couleur<\/h4>\n<p class=\"isSelectedEnd\">Imaginons un statut affich\u00e9 en vert pour \u00ab actif \u00bb et rouge pour \u00ab inactif \u00bb.<\/p>\n<h5>Version am\u00e9lior\u00e9e<\/h5>\n<pre class=\"language-html\"><code>&lt;p&gt; Statut : &lt;span aria-label=\"Compte actif\"&gt;\ud83d\udfe2 Actif&lt;\/span&gt; &lt;\/p&gt;<\/code><\/pre>\n<p class=\"isSelectedEnd\">Ou :<\/p>\n<pre class=\"language-html\"><code>&lt;p&gt; Statut : &lt;strong&gt;Actif&lt;\/strong&gt; &lt;\/p&gt;<\/code><\/pre>\n<p class=\"isSelectedEnd\">Le texte donne l\u2019information principale, la couleur devient un compl\u00e9ment.<\/p>\n<h2><span style=\"text-decoration: underline;\">Le r\u00f4le d\u2019ARIA dans la gestion des couleurs<\/span><\/h2>\n<p class=\"isSelectedEnd\">ARIA ne sert pas \u00e0 g\u00e9rer les couleurs elles-m\u00eames, mais \u00e0 compl\u00e9ter l\u2019information quand la perception visuelle peut poser probl\u00e8me.<\/p>\n<p class=\"isSelectedEnd\">Cas utiles :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\"><code>aria-required=\"true\"<\/code> pour indiquer un champ obligatoire<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><code>role=\"alert\"<\/code> pour signaler un message important<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\"><code>aria-describedby<\/code> pour relier une explication \u00e0 un \u00e9l\u00e9ment visuel<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">ARIA intervient donc en renfort du contenu textuel, pas en remplacement.<\/p>\n<h2><span style=\"text-decoration: underline;\">Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n<p class=\"isSelectedEnd\">On retrouve souvent :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Des indications uniquement en rouge\/vert<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Des contrastes trop faibles<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Des liens non soulign\u00e9s<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Des \u00e9tats d\u2019interface signal\u00e9s seulement par une couleur<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Des graphiques incompr\u00e9hensibles sans perception des couleurs<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">Ces probl\u00e8mes peuvent sembler mineurs, mais ils cr\u00e9ent de v\u00e9ritables barri\u00e8res d\u2019acc\u00e8s.<\/p>\n<h2><span style=\"text-decoration: underline;\">Impact concret pour les utilisateurs<\/span><\/h2>\n<p class=\"isSelectedEnd\">Un utilisateur daltonien peut :<\/p>\n<ul data-spread=\"false\">\n<li>\n<p class=\"isSelectedEnd\">Ne pas distinguer un bouton actif d\u2019un bouton inactif<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Ne pas voir un message d\u2019erreur<\/p>\n<\/li>\n<li>\n<p class=\"isSelectedEnd\">Confondre des donn\u00e9es dans un graphique<\/p>\n<\/li>\n<\/ul>\n<p class=\"isSelectedEnd\">L\u2019ajout d\u2019indices textuels ou visuels compl\u00e9mentaires am\u00e9liore imm\u00e9diatement la compr\u00e9hension.<\/p>\n<h2><span style=\"text-decoration: underline;\">Conclusion<\/span><\/h2>\n<p class=\"isSelectedEnd\">Le chapitre 3 du RGAA rappelle une r\u00e8gle simple mais essentielle : la couleur ne doit jamais \u00eatre le seul moyen de transmettre une information. Les contrastes doivent \u00eatre suffisants et chaque information importante doit exister sous une forme alternative, notamment textuelle.<\/p>\n<p>Les attributs ARIA peuvent compl\u00e9ter certains cas, en particulier dans les formulaires ou les messages dynamiques, mais l\u2019essentiel repose sur une conception visuelle claire, lisible et inclusive d\u00e8s le d\u00e9part.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Le chapitre 3 du RGAA est consacr\u00e9 \u00e0 l\u2019usage des couleurs dans les interfaces num\u00e9riques. Il r\u00e9pond \u00e0 un [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[],"class_list":["post-106","post","type-post","status-publish","format-standard","hentry","category-comprendre-le-rgaa"],"_links":{"self":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/comments?post=106"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/106\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}