Le th\u00e8me sombre n’am\u00e9liore pas la lisibilit\u00e9 pour tout le monde<\/strong><\/h3>\n\n\n\nJe vous fais le r\u00e9sum\u00e9 rapide des ressources qui sont sous cet article : m\u00eame si le th\u00e8me sombre peut am\u00e9liorer la lisibilit\u00e9 pour certaines utilisatrices et utilisateurs<\/strong>, ce n’est pas le cas pour tout le monde. Il peut \u00e9galement poser des probl\u00e8mes \u00e0 d\u2019autres personnes et rendre les choses plus difficiles \u00e0 lire<\/strong>. C\u2019est le cas, par exemple, pour les astigmates<\/strong>, mais aussi les personnes qui naviguent au clavier (sans souris) lorsque l’indicateur de prise de focus est mal g\u00e9r\u00e9, ou encore, pour les personnes dyslexiques, etc.<\/em> Et juste pour que ce soit clair : je ne nie pas qu’un th\u00e8me sombre est utile pour certaines personnes, mais je ne suis juste pas d’accord avec les articles qui pr\u00e9tendent un peu trop rapidement que le th\u00e8me sombre est mieux pour tout le monde.<\/em><\/p>\n\n\n\nTh\u00e8me sombre ou non ? Laissez le choix \u00e0 vos utilisatrices et utilisateurs !<\/strong><\/h3>\n\n\n\nIl ne faut pas, pour autant, arr\u00eater de proposer des th\u00e8mes sombres. Ils peuvent \u00eatre utiles pour certains types de personnes. La solution consiste \u00e0 donner le choix, en proposant, <\/strong>si les deux modes, et laisser choisir les utilisatrices, le mode qui leur convient le mieux.<\/p>\n\n\n\nAutre d\u00e9tail : ne forcez pas le choix du mode en suivant les param\u00e8tres du syst\u00e8me d’exploitatio<\/strong>n. Certaines personnes ont un syst\u00e8me d’exploitation en mode sombre, mais ne sont pas capables de lire du texte clair sur fond sombre quand il est long (spoiler alert <\/span>: moi)<\/em>. Firefox mobile propose une alternative int\u00e9ressante : dans les options, il y a la possibilit\u00e9 de suivre votre syst\u00e8me d’exploitation, mais aussi forcer le th\u00e8me sombre ou fonc\u00e9 pour les sites qui le proposent. Ce param\u00e8tre sera ensuite pass\u00e9 \u00e0 la media-query CSS prefers-color-scheme<\/code><\/span><\/a>. M\u00eame chose dans Gmail.<\/p>\n\n\n\n\n
<\/figure>\n<\/figure>\n<\/div>\n\n\nRendez accessibles votre th\u00e8me sombre !<\/strong><\/h3>\n\n\n\nEnfin, n’oubliez pas que votre th\u00e8me sombre doit \u00e9galement \u00eatre accessible. Voici quelques points \u00e0 ne pas oublier :<\/p>\n\n\n\n
\n- V\u00e9rifiez les rapports de contraste<\/strong> des combinaisons de couleur. Plus d’informations l\u00e0-dessus dans mon article Accessibilit\u00e9 et couleurs : outils et ressources pour concevoir des produits accessibles<\/a> et dans le crit\u00e8re RGAA<\/a>.<\/li>\n\n\n\n
- Faites attention aux polices de caract\u00e8res<\/strong>, en particulier celles qui sont en grasses et peuvent provoquer des scintillements (le fameux effet halo).<\/li>\n\n\n\n
- N’oubliez pas d’adapter l\u2019indicateur de prise de focus<\/strong>. C’est vrai pour les th\u00e8mes sombres, mais aussi pour toutes les \u00ab\u00a0zones sombres\u00a0\u00bb de votre site (mon indicateur de prise de focus par d\u00e9faut violet, devient blanc dans la zone sombre de la newsletter, par exemple<\/a>).<\/li>\n\n\n\n
- N’oubliez pas de v\u00e9rifier les couleurs des liens visit\u00e9s (
:visited<\/code> en CSS) de votre th\u00e8me sombre : ils sont violets par d\u00e9faut et leur contraste est faible lorsqu’ils sont utilis\u00e9s sur un fond sombre (merci \u00e0 Sheri Byrne-Haber pour le rappel !).<\/em><\/li>\n<\/ul>\n\n\n\nSolutions navigateur, si un second th\u00e8me clair \/ fonc\u00e9 n’est pas disponible.<\/strong><\/h3>\n\n\n\nApr\u00e8s avoir publi\u00e9 la premi\u00e8re version de cet article, j’ai eu des discussions int\u00e9ressantes et certaines m’ont demand\u00e9 comment faire, si vous \u00eates astigmate par exemple, et que le site ne propose que le th\u00e8me sombre. Et la m\u00eame question dans l’autre sens : comment faire, si vous avez besoin d’un th\u00e8me sombre (parce que vous \u00eates photosensible par exemple), et que le site ne propose qu’un th\u00e8me clair.<\/p>\n\n\n\n
Sur du long texte (article de blog, journal, etc.), ma pr\u00e9f\u00e9rence personnelle est le mode lecteur de Firefox<\/a> : il \u00e9limine les distractions et vous permet de choisir un mode (clair, sombre, sepia, etc.). De toute fa\u00e7on, la plupart du temps, je ne lis m\u00eame pas l’article, je laisse le lecteur d’\u00e9cran de Firefox me le lire \u00e0 haute voix. Safari et Edge (au moins sur mac) offrent la m\u00eame chose. Une autre solution, si vous avez besoin d’un th\u00e8me sombre, est dark reader<\/span><\/a>, une extension pour plusieurs navigateurs qui vous permet de forcer un th\u00e8me sombre sur n’importe quel site.<\/p>\n\n\n\n
<\/figure>\n<\/div>\n\n\nPetite note de Julie Moynat, experte accessibilit\u00e9 sur mastodon<\/a> :<\/p>\n\n\n\n\n\u201c\u00c0 noter qu’il est beaucoup plus facile pour les utilisateurices de changer un site qui ne laisse pas le choix en le passant du mode clair vers le mode sombre que l’inverse car les extensions pour passer au mode clair n’existent pas. Donc si seul le mode sombre existe sur votre site web et que le mode lecture de Firefox n’est pas activable (il est activable sur les articles uniquement et des fois, sur certains articles, \u00e7a ne fonctionne m\u00eame pas), je ferme votre site direct.\u201d<\/p>\n<\/blockquote>\n\n\n\n
Enfin, Bramus s’est pench\u00e9 sur l’id\u00e9e que les bascules en th\u00e8me sombre devraient \u00eatre une fonctionnalit\u00e9 des navigateurs<\/a>. Je suis curieuse de voir o\u00f9 cela va nous mener.<\/p>\n\n\n\nDonc, oui, il n’existe pas solution magique qui marche pour tout le monde, et je suis heureuse qu’il y ait des options propos\u00e9es.<\/p>\n\n\n\n
Ressources pour aller plus loin<\/strong><\/h2>\n\n\n\nLes habitu\u00e9es du blog savent que j’aime donner des ressources aux lectrices et lecteurs pour explorer le sujet. Toutes les ressources qui suivent sont en anglais.<\/p>\n\n\n\n
Th\u00e8me sombre et accessibilit\u00e9<\/strong><\/h3>\n\n\n\nVoici quelques articles plus d\u00e9taill\u00e9s pour vous aider \u00e0 mieux comprendre certains probl\u00e8mes li\u00e9s au th\u00e8me sombre et \u00e0 l’accessibilit\u00e9<\/p>\n\n\n\n
\n- <\/a>Dark UI themes are new and cool \u2014 but are they accessible?<\/a> <\/span>Sheri Byrne-Haber, d\u00e9mystifie plusieurs mythes du th\u00e8me sombre en termes d\u2019accessibilit\u00e9, mais aussi sur les \u00e9conomies d’\u00e9lectricit\u00e9 et l’am\u00e9lioration de la lisibilit\u00e9 du texte.<\/li>\n\n\n\n
- Accessibility for People with Astigmatism<\/span><\/a> (sur le blog de Level Access dont je suis pas fan suite au rachat d\u2019une solution d\u2019overlay, mais l’article est bien expliqu\u00e9) : <\/em>une explication sur le fonctionnement de l’astigmatisme et le \u00ab\u00a0halo\u00a0\u00bb qui rend le texte clair flou, quand il est sur un fond sombre. C’est particuli\u00e8rement difficile lorsqu’on utilise du blanc pur sur du noir pur.<\/li>\n\n\n\n
- Peering into the accessibility of Dark Mode<\/span><\/a> :comment en sommes-nous arriv\u00e9s \u00e0 la tendance du th\u00e8me sombre, aide-t-il vraiment \u00e0 la lisibilit\u00e9, quand aide-t-il ou non \u00e0 l’accessibilit\u00e9, et un peu de d\u00e9mystification sur la productivit\u00e9 du th\u00e8me sombre et encore une fois ses soi-disants bienfaits \u00e9cologiques. <\/li>\n\n\n\n
- Why \u2018dark mode\u2019 causes more accessibility issues than it solves<\/bdo><\/a> : En r\u00e9sume, le th\u00e8me sombre est probl\u00e9matique pour l’astigmatisme \u00e0 cause du halo (voir d’autres articles), donc, encore une fois, donnez le contr\u00f4le \u00e0 l’utilisatrice. Il y a \u00e9galement de nombreux liens vers diff\u00e9rents articles scientifiques \u00e0 la fin de l’article que vous pouvez consulter.<\/li>\n<\/ul>\n\n\n\n
En prime, si vous \u00eates curieux de conna\u00eetre l’histoire du th\u00e8me sombre, je vous recommande : Br\u00e8ve histoire du \u00ab\u00a0th\u00e8me sombre\u00a0\u00bb, des \u00e9crans matriciels du d\u00e9but des ann\u00e9es 80 \u00e0 aujourd’hui<\/a> : les \u00e9crans sombres \u00e9taient autrefois une n\u00e9cessit\u00e9 techniques, ils sont aujourd’hui une option d’affichage \u00e9l\u00e9gante. Que s’est-il pass\u00e9 entre-temps ?<\/p>\n\n\n\nComment cr\u00e9er un th\u00e8me sombre accessible<\/strong><\/h3>\n\n\n\nComme expliqu\u00e9 en amont, si vous proposez un th\u00e8me sombre, vous devez \u00e9galement le rendre accessible. Voici quelques ressources pour vous aider :<\/p>\n\n\n\n
\n- Dark Isn\u2019t Just a Mode<\/a> <\/span>Steven Hoober a \u00e9crit un article int\u00e9ressant pour vous aider \u00e0 am\u00e9liorer les th\u00e8mes sombres. En r\u00e9sum\u00e9, un th\u00e8me sombre ce n\u2019est pas juste tout passer en noir et blanc, vous allez \u00e9galement jouer sur les teintes et diff\u00e9rents degr\u00e9s d\u2019obscurit\u00e9<\/li>\n\n\n\n
- Dark mode UI design \u2013 7 best practices<\/a> <\/bdo>: passez directement \u00e0 la partie sur les bonnes pratiques, qui contient de bons conseils sur l’utilisation des couleurs, de l’\u00e9l\u00e9vation, de l’indicateur de prise de focus, etc. par Ond\u0159ej Pe\u0161i\u010dka.<\/li>\n\n\n\n
- Dark Mode: Best Practices for Accessibility<\/span><\/a> : si vous proposez un th\u00e8me sombre, voici de bons conseils pour le rendre \u00e9galement accessible<\/li>\n\n\n\n
- Material UI principles for dark theme<\/span><\/a> des principes int\u00e9ressants pour le mode sombre dans Material UI de Google.<\/li>\n\n\n\n
- Dark mode and variable fonts<\/a> <\/span>Robin Rendle explore l’effet \u00ab\u00a0un texte blanc para\u00eet plus gras sur un fond sombre\u00a0\u00bb et la mani\u00e8re d’utiliser des variable fonts (polices \u00e0 caract\u00e8res variables) pour adapter les graisses aux th\u00e8mes sombres.<\/li>\n<\/ul>\n\n\n\n
Voil\u00e0, si jamais vous avez des ressources en fran\u00e7ais, n’h\u00e9sitez pas \u00e0 me les partager.<\/p>\n","protected":false},"excerpt":{"rendered":"
M\u00eame si le th\u00e8me sombre (dark mode) peut am\u00e9liorer la lisibilit\u00e9 pour certaines personnes, il peut aggraver la situation pour d’autres (astigmates, les dyslexiques, les utilisatrices au claviers). Proposez les deux modes et laissez le choix \u00e0 l’utilisatrice. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le \u00e9galement accessible!<\/p>\n","protected":false},"author":3,"featured_media":8572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223],"tags":[],"class_list":["post-8555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilite"],"yoast_head":"\n
Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<meta name=\"description\" content=\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-212.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-24T06:11:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-24T10:25:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2024\/05\/mode-sombre-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1700\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\",\"name\":\"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"datePublished\":\"2024-05-24T06:11:28+00:00\",\"dateModified\":\"2024-05-24T10:25:00+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"width\":1700,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","og_locale":"fr_FR","og_type":"article","og_title":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2024-05-24T06:11:28+00:00","article_modified_time":"2024-05-24T10:25:00+00:00","og_image":[{"width":1700,"height":700,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2024\/05\/mode-sombre-1.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","name":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","datePublished":"2024-05-24T06:11:28+00:00","dateModified":"2024-05-24T10:25:00+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","width":1700,"height":700},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=8555"}],"version-history":[{"count":10,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555\/revisions"}],"predecessor-version":[{"id":8582,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555\/revisions\/8582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/8572"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=8555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=8555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=8555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Th\u00e8me sombre ou non ? Laissez le choix \u00e0 vos utilisatrices et utilisateurs !<\/strong><\/h3>\n\n\n\nIl ne faut pas, pour autant, arr\u00eater de proposer des th\u00e8mes sombres. Ils peuvent \u00eatre utiles pour certains types de personnes. La solution consiste \u00e0 donner le choix, en proposant, <\/strong>si les deux modes, et laisser choisir les utilisatrices, le mode qui leur convient le mieux.<\/p>\n\n\n\nAutre d\u00e9tail : ne forcez pas le choix du mode en suivant les param\u00e8tres du syst\u00e8me d’exploitatio<\/strong>n. Certaines personnes ont un syst\u00e8me d’exploitation en mode sombre, mais ne sont pas capables de lire du texte clair sur fond sombre quand il est long (spoiler alert <\/span>: moi)<\/em>. Firefox mobile propose une alternative int\u00e9ressante : dans les options, il y a la possibilit\u00e9 de suivre votre syst\u00e8me d’exploitation, mais aussi forcer le th\u00e8me sombre ou fonc\u00e9 pour les sites qui le proposent. Ce param\u00e8tre sera ensuite pass\u00e9 \u00e0 la media-query CSS prefers-color-scheme<\/code><\/span><\/a>. M\u00eame chose dans Gmail.<\/p>\n\n\n\n\n<\/figure>\n<\/figure>\n<\/div>\n\n\nRendez accessibles votre th\u00e8me sombre !<\/strong><\/h3>\n\n\n\nEnfin, n’oubliez pas que votre th\u00e8me sombre doit \u00e9galement \u00eatre accessible. Voici quelques points \u00e0 ne pas oublier :<\/p>\n\n\n\n
\n- V\u00e9rifiez les rapports de contraste<\/strong> des combinaisons de couleur. Plus d’informations l\u00e0-dessus dans mon article Accessibilit\u00e9 et couleurs : outils et ressources pour concevoir des produits accessibles<\/a> et dans le crit\u00e8re RGAA<\/a>.<\/li>\n\n\n\n
- Faites attention aux polices de caract\u00e8res<\/strong>, en particulier celles qui sont en grasses et peuvent provoquer des scintillements (le fameux effet halo).<\/li>\n\n\n\n
- N’oubliez pas d’adapter l\u2019indicateur de prise de focus<\/strong>. C’est vrai pour les th\u00e8mes sombres, mais aussi pour toutes les \u00ab\u00a0zones sombres\u00a0\u00bb de votre site (mon indicateur de prise de focus par d\u00e9faut violet, devient blanc dans la zone sombre de la newsletter, par exemple<\/a>).<\/li>\n\n\n\n
- N’oubliez pas de v\u00e9rifier les couleurs des liens visit\u00e9s (
:visited<\/code> en CSS) de votre th\u00e8me sombre : ils sont violets par d\u00e9faut et leur contraste est faible lorsqu’ils sont utilis\u00e9s sur un fond sombre (merci \u00e0 Sheri Byrne-Haber pour le rappel !).<\/em><\/li>\n<\/ul>\n\n\n\nSolutions navigateur, si un second th\u00e8me clair \/ fonc\u00e9 n’est pas disponible.<\/strong><\/h3>\n\n\n\nApr\u00e8s avoir publi\u00e9 la premi\u00e8re version de cet article, j’ai eu des discussions int\u00e9ressantes et certaines m’ont demand\u00e9 comment faire, si vous \u00eates astigmate par exemple, et que le site ne propose que le th\u00e8me sombre. Et la m\u00eame question dans l’autre sens : comment faire, si vous avez besoin d’un th\u00e8me sombre (parce que vous \u00eates photosensible par exemple), et que le site ne propose qu’un th\u00e8me clair.<\/p>\n\n\n\n
Sur du long texte (article de blog, journal, etc.), ma pr\u00e9f\u00e9rence personnelle est le mode lecteur de Firefox<\/a> : il \u00e9limine les distractions et vous permet de choisir un mode (clair, sombre, sepia, etc.). De toute fa\u00e7on, la plupart du temps, je ne lis m\u00eame pas l’article, je laisse le lecteur d’\u00e9cran de Firefox me le lire \u00e0 haute voix. Safari et Edge (au moins sur mac) offrent la m\u00eame chose. Une autre solution, si vous avez besoin d’un th\u00e8me sombre, est dark reader<\/span><\/a>, une extension pour plusieurs navigateurs qui vous permet de forcer un th\u00e8me sombre sur n’importe quel site.<\/p>\n\n\n\n<\/figure>\n<\/div>\n\n\nPetite note de Julie Moynat, experte accessibilit\u00e9 sur mastodon<\/a> :<\/p>\n\n\n\n\n\u201c\u00c0 noter qu’il est beaucoup plus facile pour les utilisateurices de changer un site qui ne laisse pas le choix en le passant du mode clair vers le mode sombre que l’inverse car les extensions pour passer au mode clair n’existent pas. Donc si seul le mode sombre existe sur votre site web et que le mode lecture de Firefox n’est pas activable (il est activable sur les articles uniquement et des fois, sur certains articles, \u00e7a ne fonctionne m\u00eame pas), je ferme votre site direct.\u201d<\/p>\n<\/blockquote>\n\n\n\n
Enfin, Bramus s’est pench\u00e9 sur l’id\u00e9e que les bascules en th\u00e8me sombre devraient \u00eatre une fonctionnalit\u00e9 des navigateurs<\/a>. Je suis curieuse de voir o\u00f9 cela va nous mener.<\/p>\n\n\n\nDonc, oui, il n’existe pas solution magique qui marche pour tout le monde, et je suis heureuse qu’il y ait des options propos\u00e9es.<\/p>\n\n\n\n
Ressources pour aller plus loin<\/strong><\/h2>\n\n\n\nLes habitu\u00e9es du blog savent que j’aime donner des ressources aux lectrices et lecteurs pour explorer le sujet. Toutes les ressources qui suivent sont en anglais.<\/p>\n\n\n\n
Th\u00e8me sombre et accessibilit\u00e9<\/strong><\/h3>\n\n\n\nVoici quelques articles plus d\u00e9taill\u00e9s pour vous aider \u00e0 mieux comprendre certains probl\u00e8mes li\u00e9s au th\u00e8me sombre et \u00e0 l’accessibilit\u00e9<\/p>\n\n\n\n
\n- <\/a>Dark UI themes are new and cool \u2014 but are they accessible?<\/a> <\/span>Sheri Byrne-Haber, d\u00e9mystifie plusieurs mythes du th\u00e8me sombre en termes d\u2019accessibilit\u00e9, mais aussi sur les \u00e9conomies d’\u00e9lectricit\u00e9 et l’am\u00e9lioration de la lisibilit\u00e9 du texte.<\/li>\n\n\n\n
- Accessibility for People with Astigmatism<\/span><\/a> (sur le blog de Level Access dont je suis pas fan suite au rachat d\u2019une solution d\u2019overlay, mais l’article est bien expliqu\u00e9) : <\/em>une explication sur le fonctionnement de l’astigmatisme et le \u00ab\u00a0halo\u00a0\u00bb qui rend le texte clair flou, quand il est sur un fond sombre. C’est particuli\u00e8rement difficile lorsqu’on utilise du blanc pur sur du noir pur.<\/li>\n\n\n\n
- Peering into the accessibility of Dark Mode<\/span><\/a> :comment en sommes-nous arriv\u00e9s \u00e0 la tendance du th\u00e8me sombre, aide-t-il vraiment \u00e0 la lisibilit\u00e9, quand aide-t-il ou non \u00e0 l’accessibilit\u00e9, et un peu de d\u00e9mystification sur la productivit\u00e9 du th\u00e8me sombre et encore une fois ses soi-disants bienfaits \u00e9cologiques. <\/li>\n\n\n\n
- Why \u2018dark mode\u2019 causes more accessibility issues than it solves<\/bdo><\/a> : En r\u00e9sume, le th\u00e8me sombre est probl\u00e9matique pour l’astigmatisme \u00e0 cause du halo (voir d’autres articles), donc, encore une fois, donnez le contr\u00f4le \u00e0 l’utilisatrice. Il y a \u00e9galement de nombreux liens vers diff\u00e9rents articles scientifiques \u00e0 la fin de l’article que vous pouvez consulter.<\/li>\n<\/ul>\n\n\n\n
En prime, si vous \u00eates curieux de conna\u00eetre l’histoire du th\u00e8me sombre, je vous recommande : Br\u00e8ve histoire du \u00ab\u00a0th\u00e8me sombre\u00a0\u00bb, des \u00e9crans matriciels du d\u00e9but des ann\u00e9es 80 \u00e0 aujourd’hui<\/a> : les \u00e9crans sombres \u00e9taient autrefois une n\u00e9cessit\u00e9 techniques, ils sont aujourd’hui une option d’affichage \u00e9l\u00e9gante. Que s’est-il pass\u00e9 entre-temps ?<\/p>\n\n\n\nComment cr\u00e9er un th\u00e8me sombre accessible<\/strong><\/h3>\n\n\n\nComme expliqu\u00e9 en amont, si vous proposez un th\u00e8me sombre, vous devez \u00e9galement le rendre accessible. Voici quelques ressources pour vous aider :<\/p>\n\n\n\n
\n- Dark Isn\u2019t Just a Mode<\/a> <\/span>Steven Hoober a \u00e9crit un article int\u00e9ressant pour vous aider \u00e0 am\u00e9liorer les th\u00e8mes sombres. En r\u00e9sum\u00e9, un th\u00e8me sombre ce n\u2019est pas juste tout passer en noir et blanc, vous allez \u00e9galement jouer sur les teintes et diff\u00e9rents degr\u00e9s d\u2019obscurit\u00e9<\/li>\n\n\n\n
- Dark mode UI design \u2013 7 best practices<\/a> <\/bdo>: passez directement \u00e0 la partie sur les bonnes pratiques, qui contient de bons conseils sur l’utilisation des couleurs, de l’\u00e9l\u00e9vation, de l’indicateur de prise de focus, etc. par Ond\u0159ej Pe\u0161i\u010dka.<\/li>\n\n\n\n
- Dark Mode: Best Practices for Accessibility<\/span><\/a> : si vous proposez un th\u00e8me sombre, voici de bons conseils pour le rendre \u00e9galement accessible<\/li>\n\n\n\n
- Material UI principles for dark theme<\/span><\/a> des principes int\u00e9ressants pour le mode sombre dans Material UI de Google.<\/li>\n\n\n\n
- Dark mode and variable fonts<\/a> <\/span>Robin Rendle explore l’effet \u00ab\u00a0un texte blanc para\u00eet plus gras sur un fond sombre\u00a0\u00bb et la mani\u00e8re d’utiliser des variable fonts (polices \u00e0 caract\u00e8res variables) pour adapter les graisses aux th\u00e8mes sombres.<\/li>\n<\/ul>\n\n\n\n
Voil\u00e0, si jamais vous avez des ressources en fran\u00e7ais, n’h\u00e9sitez pas \u00e0 me les partager.<\/p>\n","protected":false},"excerpt":{"rendered":"
M\u00eame si le th\u00e8me sombre (dark mode) peut am\u00e9liorer la lisibilit\u00e9 pour certaines personnes, il peut aggraver la situation pour d’autres (astigmates, les dyslexiques, les utilisatrices au claviers). Proposez les deux modes et laissez le choix \u00e0 l’utilisatrice. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le \u00e9galement accessible!<\/p>\n","protected":false},"author":3,"featured_media":8572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223],"tags":[],"class_list":["post-8555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilite"],"yoast_head":"\n
Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<meta name=\"description\" content=\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-212.html \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-24T06:11:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-24T10:25:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2024\/05\/mode-sombre-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1700\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\",\"name\":\"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"datePublished\":\"2024-05-24T06:11:28+00:00\",\"dateModified\":\"2024-05-24T10:25:00+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg\",\"width\":1700,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","og_locale":"fr_FR","og_type":"article","og_title":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2024-05-24T06:11:28+00:00","article_modified_time":"2024-05-24T10:25:00+00:00","og_image":[{"width":1700,"height":700,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2024\/05\/mode-sombre-1.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","name":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","datePublished":"2024-05-24T06:11:28+00:00","dateModified":"2024-05-24T10:25:00+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Le mode sombre n'est pas toujours meilleur pour l\u2019accessibilit\u00e9,laissez le choix \u00e0 vos utilisatrices et utilisateurs. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le accessible !","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/mode-sombre-1.jpg","width":1700,"height":700},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555"}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=8555"}],"version-history":[{"count":10,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555\/revisions"}],"predecessor-version":[{"id":8582,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/8555\/revisions\/8582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/8572"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=8555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=8555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=8555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Autre d\u00e9tail : ne forcez pas le choix du mode en suivant les param\u00e8tres du syst\u00e8me d’exploitatio<\/strong>n. Certaines personnes ont un syst\u00e8me d’exploitation en mode sombre, mais ne sont pas capables de lire du texte clair sur fond sombre quand il est long (spoiler alert <\/span>: moi)<\/em>. Firefox mobile propose une alternative int\u00e9ressante : dans les options, il y a la possibilit\u00e9 de suivre votre syst\u00e8me d’exploitation, mais aussi forcer le th\u00e8me sombre ou fonc\u00e9 pour les sites qui le proposent. Ce param\u00e8tre sera ensuite pass\u00e9 \u00e0 la media-query CSS Enfin, n’oubliez pas que votre th\u00e8me sombre doit \u00e9galement \u00eatre accessible. Voici quelques points \u00e0 ne pas oublier :<\/p>\n\n\n\n Apr\u00e8s avoir publi\u00e9 la premi\u00e8re version de cet article, j’ai eu des discussions int\u00e9ressantes et certaines m’ont demand\u00e9 comment faire, si vous \u00eates astigmate par exemple, et que le site ne propose que le th\u00e8me sombre. Et la m\u00eame question dans l’autre sens : comment faire, si vous avez besoin d’un th\u00e8me sombre (parce que vous \u00eates photosensible par exemple), et que le site ne propose qu’un th\u00e8me clair.<\/p>\n\n\n\n Sur du long texte (article de blog, journal, etc.), ma pr\u00e9f\u00e9rence personnelle est le mode lecteur de Firefox<\/a> : il \u00e9limine les distractions et vous permet de choisir un mode (clair, sombre, sepia, etc.). De toute fa\u00e7on, la plupart du temps, je ne lis m\u00eame pas l’article, je laisse le lecteur d’\u00e9cran de Firefox me le lire \u00e0 haute voix. Safari et Edge (au moins sur mac) offrent la m\u00eame chose. Une autre solution, si vous avez besoin d’un th\u00e8me sombre, est dark reader<\/span><\/a>, une extension pour plusieurs navigateurs qui vous permet de forcer un th\u00e8me sombre sur n’importe quel site.<\/p>\n\n\n Petite note de Julie Moynat, experte accessibilit\u00e9 sur mastodon<\/a> :<\/p>\n\n\n\n \u201c\u00c0 noter qu’il est beaucoup plus facile pour les utilisateurices de changer un site qui ne laisse pas le choix en le passant du mode clair vers le mode sombre que l’inverse car les extensions pour passer au mode clair n’existent pas. Donc si seul le mode sombre existe sur votre site web et que le mode lecture de Firefox n’est pas activable (il est activable sur les articles uniquement et des fois, sur certains articles, \u00e7a ne fonctionne m\u00eame pas), je ferme votre site direct.\u201d<\/p>\n<\/blockquote>\n\n\n\n Enfin, Bramus s’est pench\u00e9 sur l’id\u00e9e que les bascules en th\u00e8me sombre devraient \u00eatre une fonctionnalit\u00e9 des navigateurs<\/a>. Je suis curieuse de voir o\u00f9 cela va nous mener.<\/p>\n\n\n\n Donc, oui, il n’existe pas solution magique qui marche pour tout le monde, et je suis heureuse qu’il y ait des options propos\u00e9es.<\/p>\n\n\n\n Les habitu\u00e9es du blog savent que j’aime donner des ressources aux lectrices et lecteurs pour explorer le sujet. Toutes les ressources qui suivent sont en anglais.<\/p>\n\n\n\n Voici quelques articles plus d\u00e9taill\u00e9s pour vous aider \u00e0 mieux comprendre certains probl\u00e8mes li\u00e9s au th\u00e8me sombre et \u00e0 l’accessibilit\u00e9<\/p>\n\n\n\n En prime, si vous \u00eates curieux de conna\u00eetre l’histoire du th\u00e8me sombre, je vous recommande : Br\u00e8ve histoire du \u00ab\u00a0th\u00e8me sombre\u00a0\u00bb, des \u00e9crans matriciels du d\u00e9but des ann\u00e9es 80 \u00e0 aujourd’hui<\/a> : les \u00e9crans sombres \u00e9taient autrefois une n\u00e9cessit\u00e9 techniques, ils sont aujourd’hui une option d’affichage \u00e9l\u00e9gante. Que s’est-il pass\u00e9 entre-temps ?<\/p>\n\n\n\n Comme expliqu\u00e9 en amont, si vous proposez un th\u00e8me sombre, vous devez \u00e9galement le rendre accessible. Voici quelques ressources pour vous aider :<\/p>\n\n\n\n Voil\u00e0, si jamais vous avez des ressources en fran\u00e7ais, n’h\u00e9sitez pas \u00e0 me les partager.<\/p>\n","protected":false},"excerpt":{"rendered":" M\u00eame si le th\u00e8me sombre (dark mode) peut am\u00e9liorer la lisibilit\u00e9 pour certaines personnes, il peut aggraver la situation pour d’autres (astigmates, les dyslexiques, les utilisatrices au claviers). Proposez les deux modes et laissez le choix \u00e0 l’utilisatrice. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le \u00e9galement accessible!<\/p>\n","protected":false},"author":3,"featured_media":8572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223],"tags":[],"class_list":["post-8555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilite"],"yoast_head":"\nprefers-color-scheme<\/code><\/span><\/a>. M\u00eame chose dans Gmail.<\/p>\n\n\n![\"Captures](\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/customize.jpg)
Rendez accessibles votre th\u00e8me sombre !<\/strong><\/h3>\n\n\n\n
\n
:visited<\/code> en CSS) de votre th\u00e8me sombre : ils sont violets par d\u00e9faut et leur contraste est faible lorsqu’ils sont utilis\u00e9s sur un fond sombre (merci \u00e0 Sheri Byrne-Haber pour le rappel !).<\/em><\/li>\n<\/ul>\n\n\n\nSolutions navigateur, si un second th\u00e8me clair \/ fonc\u00e9 n’est pas disponible.<\/strong><\/h3>\n\n\n\n
![\"Exemples](\"https:\/\/stephaniewalter.design\/fr\/files\/2024\/05\/dark-light-reader-1536x542-1.jpg)
\n
Ressources pour aller plus loin<\/strong><\/h2>\n\n\n\n
Th\u00e8me sombre et accessibilit\u00e9<\/strong><\/h3>\n\n\n\n
\n
Comment cr\u00e9er un th\u00e8me sombre accessible<\/strong><\/h3>\n\n\n\n
\n