CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="fr" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1740133616473651578"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1740133616473651578"> <title> Des couleurs bien contrastées | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Des couleurs bien contrastées" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="fr" /> <meta name="description" content="Courte vidéo à propos des couleurs bien contrastées pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique." /> <meta property="og:description" content="Courte vidéo à propos des couleurs bien contrastées pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique." /> <link rel="canonical" href="https://www.w3.org/WAI/perspective-videos/contrast/fr" /> <meta property="og:url" content="https://www.w3.org/WAI/perspective-videos/contrast/fr" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/perspective-videos/contrast.jpg" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2025-02-21T10:26:56+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/perspective-videos/contrast.jpg" /> <meta property="twitter:title" content="Des couleurs bien contrastées" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"dateModified":"2025-02-21T10:26:56+00:00","datePublished":"2025-02-21T10:26:56+00:00","description":"Courte vidéo à propos des couleurs bien contrastées pour l’accessibilité Web – de quoi s’agit-il, qui en bénéficie, et comment mettre cela en pratique.","headline":"Des couleurs bien contrastées","image":"https://www.w3.org/WAI/content-images/perspective-videos/contrast.jpg","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.w3.org/WAI/perspective-videos/contrast/fr"},"url":"https://www.w3.org/WAI/perspective-videos/contrast/fr"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-des-couleurs-bien-contrastées resource-perspective-videos"> <nav aria-label="Liens d’évitement et sélecteur de langue" id="controls" class="default-grid"> <ul> <li><a href="#main">Aller directement au contenu</a></li> <li class="opt"><a href="/WAI/meta/customize/">Changer la taille ou la couleur du texte</a></li> <li class="opt languagelist"> <strong>Cette page en :</strong> <ul class="languagelistul"><li><a style="text-transform: capitalize;" href="/WAI/perspective-videos/contrast/" lang="en" dir="auto" translate="no">English</a></li><li><strong style="text-transform: capitalize;">français</strong></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">Toutes les traductions <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Afficher la personnalisation, les langues et les traductions' data-hidetext='Cacher les options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Afficher la personnalisation, les langues et les traductions</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Stratégies, standards, ressources pour un Web accessible aux personnes en situation de handicap.</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Recherche:</span> <input id="header-search" type="search" name="q" placeholder="Recherche" aria-label="Recherche"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Lancer la recherche" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Navigation principale" lang="fr"><ul><li><a lang="fr" href="/WAI/fundamentals/fr"><span>Fondamentaux de l'accessibilité</span></a></li><li><a lang="fr" href="/WAI/planning/fr"><span>Organisation & politiques</span></a></li><li><a lang="fr" href="/WAI/design-develop/fr"><span>Concevoir & développer</span></a></li><li><a lang="fr" href="/WAI/test-evaluate/fr"><span>Tester et évaluer</span></a></li><li><a lang="fr" href="/WAI/teach-advocate/fr"><span>Former et promouvoir</span></a></li><li><a lang="fr" href="/WAI/standards-guidelines/fr"><span>Standards/<wbr>Règles</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Chemin de fer" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="fr" href="/WAI/fundamentals/fr"><span>Fondamentaux de l'accessibilité</span></a></li><li><a lang="en" href="/WAI/people/"><span>Accessibility is About People</span></a></li><li><a lang="fr" href="/WAI/perspective-videos/fr"><span>Vidéos d'illustration</span></a></li><li><a lang="fr" href="/WAI/perspective-videos/contrast/fr" aria-current="page"><span>Couleurs bien constratées</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="fr" href="/WAI/fundamentals/fr" class="page-link"><span>Fondamentaux de l'accessibilité</span></a></li><li> <a lang="fr" href="/WAI/fundamentals/accessibility-intro/fr" class="page-link"><span>Introduction à l'accessibilité du web</span></a><ul><li> <a lang="fr" href="/WAI/videos/standards-and-benefits/fr" class="page-link"><span>Vidéo : introduction</span></a></li></ul></li><li> <a lang="en" href="/WAI/people/" aria-current="location" class="page-link"><span>Accessibility is About People</span></a><ul><li> <a lang="fr" href="/WAI/perspective-videos/fr" aria-current="location" class="page-link"><span>Vidéos d'illustration</span></a><ul><li> <a lang="fr" href="/WAI/perspective-videos/keyboard/fr" class="page-link"><span>Compatibilité avec le clavier</span></a></li> <li> <a lang="fr" href="/WAI/perspective-videos/contrast/fr" aria-current="page" class="page-link"><span>Couleurs bien constratées</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/layout/fr" class="page-link"><span>Mise en page et design clairs</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/speech/fr" class="page-link"><span>Synthèse vocale</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/controls/fr" class="page-link"><span>Liens, boutons et composants assez grands</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/captions/fr" class="page-link"><span>Sous-titres de vidéo</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/customizable/fr" class="page-link"><span>Texte personnalisable</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/voice/fr" class="page-link"><span>Reconnaissance vocale</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/understandable/fr" class="page-link"><span>Contenu compréhensible</span></a></li><li> <a lang="fr" href="/WAI/perspective-videos/notifications/fr" class="page-link"><span>Notifications et retours</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/fr" class="page-link"><span>Comment les personnes handicapées utilisent le web</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/" class="page-link"><span>Quelques utilisateurs du Web</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-one/" class="page-link"><span>Ade's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-two/" class="page-link"><span>Ian's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-three/" class="page-link"><span>Lakshmi's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-four/" class="page-link"><span>Lexie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-five/" class="page-link"><span>Sophie's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-six/" class="page-link"><span>Dhruv's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-seven/" class="page-link"><span>Marta's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-eight/" class="page-link"><span>Stefan's Story</span></a></li><li> <a lang="en" href="/WAI/people-use-web/user-stories/story-nine/" class="page-link"><span>Elias' Story</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/abilities-barriers/fr" class="page-link"><span>Des capacités et des points bloquants variés</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/auditory/" class="page-link"><span>Auditory</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/cognitive/" class="page-link"><span>Cognitive and Learning</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/physical/" class="page-link"><span>Physical</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/speech/" class="page-link"><span>Speech</span></a></li><li> <a lang="en" href="/WAI/people-use-web/abilities-barriers/visual/" class="page-link"><span>Visual</span></a></li></ul></li><li> <a lang="fr" href="/WAI/people-use-web/tools-techniques/fr" class="page-link"><span>Outils et techniques</span></a><ul><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/perception/" class="page-link"><span>Perception</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/presentation/" class="page-link"><span>Presentation</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/input/" class="page-link"><span>Input</span></a></li><li> <a lang="en" href="/WAI/people-use-web/tools-techniques/navigation/" class="page-link"><span>Interaction</span></a></li></ul></li><li> <a lang="en" href="/WAI/older-users/" class="page-link"><span>Older Users and Accessibility</span></a><ul><li> <a lang="en" href="/WAI/older-users/developing/" class="page-link"><span>How WCAG 2 Applies</span></a></li><li> <a lang="en" href="/WAI/older-users/literature/" class="page-link"><span>Literature Review</span></a></li></ul></li><li> <a lang="en" href="/WAI/fundamentals/accessibility-usability-inclusion/" class="page-link"><span>Accessibility, Usability, Inclusion</span></a></li></ul></li><li> <a lang="fr" href="/WAI/fundamentals/components/fr" class="page-link"><span>Composantes de l'accessibilité du Web</span></a></li><li> <a lang="fr" href="/WAI/fundamentals/accessibility-principles/fr" class="page-link"><span>Principes d’accessibilité</span></a></li><li> <a lang="en" href="/WAI/research/" class="page-link"><span>Research</span></a><ul><li> <a lang="en" href="/WAI/research/user-requirements/" class="page-link"><span>User Requirements</span></a></li><li> <a lang="en" href="/WAI/research/ai2023/" class="page-link"><span>AI and Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/courses/" class="page-link"><span>Digital Accessibility Courses</span></a><ul><li> <a lang="en" href="/WAI/courses/foundations-course/" class="page-link"><span>W3C Foundations Online Course</span></a></li><li> <a lang="en" href="/WAI/courses/list/" class="page-link"><span>Course List</span></a></li></ul></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Langues/Traductions</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><a href="/WAI/perspective-videos/contrast/" lang="en" dir="auto" translate="no">English (original)</a></li><li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">français</strong></li></ul><p><a href="/WAI/translations/#fr">Autres ressources en français</a></p> <p><a href="/WAI/translations/">Toutes les traductions</a></p> <p><a href="/WAI/about/translating/">Traduire les ressources de WAI</a></p> </nav> </div> <main id="main" lang="fr"> <header class="in-resource"> <h1> Des couleurs bien contrastées </h1><p>dans <a lang="fr" href="/WAI/perspective-videos/fr"><span>L’accessibilité Web illustrée : explorez ses effets et ses bénéfices pour tous</span></a></p></header> <section id="translation-info" class="doc-note-box doc-note-translation"> <h2 class="visuallyhidden"><span lang="en">About this translation</span></h2> <p>Cette traduction faite par des volontaires peut ne pas refléter les intentions de <a href="/WAI/perspective-videos/contrast/">l’original en anglais</a>.</p> <p><strong>Traduction :</strong> Sofia Ahmed, Rémi Bétin. Contribution : Sandra Velarde Gonzalez (ETNIC). <br />L’Initiative pour l’Accessibilité du Web (WAI) remercie les traducteurs, et accueille volontiers d’autres <a href="/WAI/about/translating/">traductions</a>.</p><div class="translation-needs-update"> <p><svg focusable="false" aria-hidden="true" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> <strong>Avertissement :</strong> La version originale en anglais a été substantiellement mise à jour depuis cette traduction. — <a href="/WAI/perspective-videos/changelog/">Derniers changements</a><br />Version en anglais actualisée le : <span dir="auto">2024-07-15</span> — Date de la traduction : <span dir="auto">2023-10-12</span>. <br />Nous accueillons volontiers une <a href="/WAI/about/translating/">mise à jour de la traduction</a>.</p> </div></section><p>L’accessibilité Web est essentielle pour les personnes en situation de handicap et utile à tous. Découvrez les effets de l’accessibilité et les bénéfices pour tous dans diverses situations.</p> <h2 id="film" class="no-display">Vidéo sur des couleurs bien contrastées</h2> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="Hui87z2Vx8o" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/perspective-videos/en/contrast.en.vtt" label="English" kind="captions" srclang="en" /><track src="/WAI/wai-videos/perspective-videos/fr/contrast.fr.vtt" label="français" kind="subtitles" srclang="fr" default="" /></video> </div> <div class="video-container" data-video-type="audio-described"> <video preload="metadata" data-youtube-id="a9kNUv6N8Rk" data-youtube-nocookie="true" data-description-audible="false" playsinline=""><track src="/WAI/wai-videos/perspective-videos/en/contrast_ad.en.vtt" label="English" kind="captions" srclang="en" /><track src="/WAI/wai-videos/perspective-videos/fr/contrast_ad.fr.vtt" label="français" kind="subtitles" srclang="fr" default="" /><track src="/WAI/wai-videos/perspective-videos/en/contrast_ad_desc.en.vtt" label="English" kind="descriptions" srclang="en" /><track src="/WAI/wai-videos/perspective-videos/fr/contrast_ad_desc.fr.vtt" label="français" kind="descriptions" srclang="fr" default="" /></video> </div> <p><button id="audio_description_button"><svg aria-hidden="true" class="icon-audio-description "><use xlink:href="/WAI/assets/images/icons.svg#icon-audio-description"></use></svg> <span>Enable Audio Description</span></button></p> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> <script src="/WAI/assets/ableplayer/build/ableplayer.min.js"></script> <script src="//apis.google.com/js/client.js?onload=initGoogleClientApi"></script> <script> (function () { 'use strict'; let player1 = new AblePlayer($('[data-video-type=""] video')); const audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]'); const nonaudiodescribed = document.querySelectorAll('[data-video-type=""]'); if (audiodescribed.length > 0) { let player2 = new AblePlayer($('[data-video-type="audio-described"] video')); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.setAttribute('hidden', true); }); const adbutton = document.querySelector('#audio_description_button'); adbutton.addEventListener('click', function(e){ player1.pauseMedia(); player2.pauseMedia(); if (e.currentTarget.getAttribute('data-status') === "audio-described") { Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.removeAttribute("hidden"); }); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.setAttribute('hidden', true); }); e.currentTarget.setAttribute('data-status', 'non-audio-described'); e.currentTarget.querySelector('span').textContent = 'Enable Audio Description'; } else { Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.setAttribute('hidden', true); }); Array.prototype.forEach.call(audiodescribed, function(el, i){ el.removeAttribute("hidden"); }); e.currentTarget.setAttribute('data-status', 'audio-described'); e.currentTarget.querySelector('span').textContent = 'Disable Audio Description'; } }); } }()); </script> <p>Les informations de cette vidéo sont disponibles sous forme de <a href="#transcript">Transcription avec description des visuels</a> en bas de la page.</p> <h2 id="what">Que signifie des « couleurs bien contrastées » ?</h2> <p>Les couleurs utilisées doivent avoir un contraste suffisant (appelé techniquement <em>rapport de contraste de luminance</em>), par exemple entre la couleur du texte et la couleur d’arrière-plan. Cela inclut le texte sur des images, des icônes, et des boutons. Les couleurs utilisées pour communiquer des informations sur les diagrammes, les cartes, et d’autres types d’images doivent également être perceptibles.</p> <h2 id="who">Qui dépend de cette fonctionnalité ?</h2> <ul> <li>Les personnes avec une faible sensibilité au contraste, ce qui est courant chez les personnes âgées.</li> <li>Les personnes qui ne peuvent pas distinguer certaines couleurs (souvent appelé « daltonisme »).</li> </ul> <h2 id="others">Quels sont les autres bénéfices ?</h2> <ul> <li>Le contenu est utilisable dans différentes conditions de luminosité, comme l’exposition à la lumière du soleil ou à une lumière éblouissante.</li> <li>Le contenu est plus facile à lire pour tout le monde, y compris pour ceux qui n’ont pas de problèmes visuels particuliers.</li> </ul> <h2 id="action">Comment mettre cela en pratique ?</h2> <p>Choisissez des couleurs de texte et d’arrière-plan qui fournissent suffisamment de contraste. Des outils existent pour vous aider à vérifier et sélectionner des combinaisons de couleurs adéquates. On réalise idéalement cette action tôt dans la phase de conception et de choix des palettes de couleurs. Si certaines personnes ont besoin d’un contraste élevé, d’autres sont sensibles à la luminosité et ont besoin de <a href="/WAI/perspective-videos/customizable/fr">modifier les couleurs</a>.</p> <h2 id="resources">Plus d’informations</h2> <ul> <li><strong>Principe d’accessibilité :</strong> <ul> <li><a href="/WAI/fundamentals/accessibility-principles/fr#distinguishable">Du contenu plus facile à voir et à entendre</a></li> </ul> </li> <li><strong>Pour démarrer :</strong> <ul> <li><a href="/WAI/tips/designing/fr#provide-sufficient-contrast-between-foreground-and-background">Fournissez un contraste suffisant entre le premier plan et l’arrière-plan</a></li> </ul> </li> <li><strong>Vérification simple :</strong> <ul> <li><a href="/WAI/test-evaluate/preliminary/#contrast" hreflang="en">Rapport de contraste (“contraste des couleurs”) (en anglais)</a></li> </ul> </li> <li><strong>Témoignages d’utilisateurs :</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/archived/fr#shopper">Lee, client de site Web marchand qui ne peut pas distinguer certaines couleurs (daltonisme)</a></li> <li><a href="/WAI/people-use-web/user-stories/archived/fr#retiree">Yun, retraité avec une mauvaise vue, un tremblement des mains, et une perte de mémoire à court terme</a></li> </ul> </li> <li><strong>Besoins des utilisateurs :</strong> <ul> <li><a href="https://www.w3.org/TR/low-vision-needs/">Exigences d’accessibilité pour les personnes malvoyantes</a></li> </ul> </li> <li><strong>Règles pour l’accessibilité des contenus Web (<a href="/WAI/standards-guidelines/wcag/fr">Vue d’ensemble des WCAG</a>) :</strong> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/quickref/?tags=contrast">Critères de succès liés au “contraste”</a></li> </ul> </li> <li><strong>Applicabilité aux appareils mobiles :</strong> <ul> <li><a href="/WAI/standards-guidelines/shared-experiences/#color" hreflang="en">Informations transmises seulement par la couleur (en anglais)</a></li> </ul> </li> </ul> <h2 id="transcript">Transcription avec description des visuels</h2> <table> <thead> <tr> <th width="65%">Audio</th> <th>Visuel</th> </tr> </thead> <tbody> <tr> <td>L’accessibilité Web illustrée : des couleurs bien contrastées</td> <td>L’accessibilité Web illustrée : des couleurs bien contrastées</td> </tr> <tr> <td>Un bon design passe pratiquement inaperçu.</td> <td>Des panneaux directionnels sont affichés. Une jeune femme marche gaiement dans la rue.</td> </tr> <tr> <td>Mais il en faut peu pour rendre les choses confuses et frustrantes.</td> <td>Les panneaux changent et ont désormais un contraste insuffisant. La jeune femme semble perdue.</td> </tr> <tr> <td>Choisir des couleurs peu contrastées rend la navigation, la lecture et l’interaction très pénibles.</td> <td>Elle regarde une application de navigation sur son téléphone mobile.</td> </tr> <tr> <td>Un bon design implique un contraste suffisant entre les couleurs au premier plan et à l’arrière-plan. Cela ne concerne pas que le texte et les images, mais aussi les liens, les icônes, et les boutons.</td> <td>L’application montre un bouton avec un mauvais contraste, qui se transforme peu à peu pour devenir lisible.</td> </tr> <tr> <td>Toute chose suffisamment importante pour être vue doit apparaître clairement.<br /> C’est essentiel pour les personnes avec une faible sensibilité au contraste,<br /> qui devient courante avec l’âge.</td> <td>Un homme âgé est assis sur un canapé et regarde une tablette. Il se lève pour aller lire un message sur son téléphone mobile.</td> </tr> <tr> <td>Avec des couleurs bien choisies, l’utilisation des sites Web et des applications peut être facilitée dans plus de situations. Par exemple, dans différentes conditions de luminosité.</td> <td>Le soleil se reflète sur l’écran du téléphone, mais le texte reste lisible.</td> </tr> <tr> <td>L’accessibilité Web : essentielle pour certains, utile à tous.</td> <td> </td> </tr> <tr> <td>Visitez w3.org/WAI/perspectives pour plus d’informations concernant <em>Des couleurs bien contrastées</em></td> <td>Visitez<br /> w3.org/WAI/perspectives<br /> pour plus d’informations concernant<br /> <em>Des couleurs bien contrastées.</em><br /> Logo de l’Initiative pour l’accessibilité du Web de W3C</td> </tr> </tbody> </table> <nav class="pager" aria-label="Previous/Next Page"> <ul><li class="pager--item previous"> <a href="/WAI/perspective-videos/keyboard/fr"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Précédent:</span> <span class="pager--item-text-target">Compatibilité avec le clavier</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/perspective-videos/layout/fr"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Suivant:</span> <span class="pager--item-text-target">Mise en page et conception claires</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Aider à améliorer cette page </h2></header><div class="box-i"><p>Merci de partager vos idées, vos suggestions ou vos commentaires par courriel à la liste archivée publiquement <a href="mailto:wai@w3.org?body=%5Bajoutez%20un%20objet%20d%E2%80%99email%20appropri%C3%A9%5D%0A%0A%5Bvotre%20commentaire%20ici...%5D%0A%0AJ%E2%80%99accepte%20que%20ceci%20soit%20partag%C3%A9%20sur%20une%20liste%20de%20diffusion%20archiv%C3%A9e%20publiquement.">wai@w3.org</a> ou via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Bajoutez%20un%20objet%20d%E2%80%99email%20appropri%C3%A9%5D%0A%0A%5Bvotre%20commentaire%20ici...%5D%0A%0AJ%E2%80%99accepte%20que%20ceci%20soit%20partag%C3%A9%20sur%20une%20liste%20de%20diffusion%20archiv%C3%A9e%20publiquement." class="button"><span>Courriel</span></a><a href=" https://github.com/w3c/wai-website/edit/main/collections/_perspective-videos/contrast.fr.md " class="button"><span>Cloner et modifier sur GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&title=[fr]%20&wai-resource-id=wai-perspective-videos&wai-url=https://www.w3.org/WAI/perspective-videos/contrast/fr" class="button"><span>Nouveau ticket sur GitHub</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Retour en haut de page</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Version en anglais actualisée le :</strong> 2024-07-15. <a href="/WAI/perspective-videos/changelog/">Derniers changements</a>. (Date de la traduction : 2023-10-12).</p><strong>Rédacteur et chef du projet :</strong> <a href="https://www.w3.org/People/shadi">Shadi Abou-Zahra</a>. Développé par le <a href="https://www.w3.org/WAI/EO/">Groupe de travail Éducation et Promotion</a> avec le soutien du projet <a href="https://www.w3.org/WAI/DEV/">WAI-DEV</a>, co-financé par la Commission européenne. Mis à jour avec le soutien de la Fondation Ford. <a href="/WAI/perspective-videos/acknowledgements/">Remerciements</a>.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Stratégies, standards et ressources pour rendre le Web accessible aux personnes en situation de handicap.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1740133616473651578"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1740133616473651578"></script> <script> svg4everybody(); </script> <script src="/WAI/assets/scripts/lang/fr.js?1740133616473651578"></script> </body> </html>