title: Dark mode et accessibilité
url: https://nota-bene.org/Dark-mode-et-accessibilite
hash_url: 544ecea9397616a9f4cfcc6fe27afc3d

<p>Il y a quelques semaines des collègues designers qui travaillaient sur le <i lang="en">dark mode</i> m’ont demandé si c’était « bon pour l’accessibilité ». Voilà la réponse que je leur ai faite, si ça peut être utile à quelqu’un.</p>
<p>Préambule : c’est vrai que d’après les quelques articles que j’ai pu lire en ligne, et de ce que je vois de mon entourage, un certain nombre de gens préfèrent régler leur système en mode sombre (fond sombre voire noir, texte clair). Ce n’est pas mon cas :</p>
<blockquote>
<p>Pour ma part je fuis purement et simplement le <i lang="en">dark mode</i>, qui me détruit les yeux au bout de 3 lignes — enfin, « L’œil » plutôt, celui qui voit. Je vais faire un message plus personnel que généraliste et professionnel, mais ça me semble utile pour aider à la réflexion.</p>
<p>Je suis le cas typique du client qui a besoin obligatoirement d’un <i lang="en">light mode</i>, sans quoi je n’utilise plus l’application et/ou je ne consulte plus le site (c’est déjà arrivé, j’ai désinstallé l’application et fermé l’onglet de mon navigateur). Dans mon cas, le <i lang="en">dark mode</i>, contrairement à ce que dit [le document dont parlaient mes collègues], augmente très fortement ma fatigue oculaire. Au bout de trois lignes j’ai la rétine imprimée, des lignes qui flottent devant les yeux, c’est très désagréable.</p>
<p>Je baisse la luminosité de l’écran en soirée, je le fais virer un peu vers les tons chauds (pour des questions de mélatonine <abbr title="et cætera">etc.</abbr>), mais il est pour moi hors de question de passer en <i lang="en">dark mode</i>.</p>
<p>Mon hypothèse (mais il faudrait en discuter avec des ergonomes qui s’y connaissent mieux que moi sur les handicaps visuels) c’est que quand on ne voit que d’un œil la sensibilité à la luminosité (et donc à l’éblouissement) n’est pas gérée par une moyenne des deux yeux, ça rend le <i lang="en">dark mode</i> proprement impossible à utiliser.</p>
<p>Bref, pour ne pas rester sur mon cas parmi des dizaines d’autres, généralisons : je rejoins complètement vos réflexions sur le choix à laisser à l’utilisateur, soit en se basant sur ses paramètre systèmes (par exemple une <i lang="en">media query</i> <abbr title="Cascading Stylesheets">CSS</abbr> qui existe déjà), soit par un réglage (et un cookie ou autre). C’est ce que je vois faire sur les applications qui commencent à l’implémenter sur mon Android.</p>
<p>Pour finir sur une note rigolote, pour le <span lang="en">fun</span>, voilà un joli exemple de <i lang="en">light/dark mode</i> avec une <i lang="en">media query</i> : <a href="https://daverupert.com/" class="spip_out" hreflang="en" rel="external">le site personnel de Dave Rupert</a>.</p>
<p>(il suffit de basculer votre système de l’un à l’autre)</p>
<p>Il joue notamment avec les filtres sur l’image, qui passe un filtre à <code lang="en" class="spip_code" dir="ltr">brightness(0.9) contrast(1.2)</code> en <i lang="en">dark mode</i>, c’est très malin.</p>
</blockquote>
<p>En clair : faites un <i lang="en">dark mode</i> sur votre site si ça vous repose les yeux, voire juste parce que ça vous amuse, mais surtout ne me l’imposez pas. J’ai même écrit un <i lang="en">bookmarklet</i> pour forcer automatiquement le site en <a href="">noir sur blanc</a> (avec les liens soulignés), c’est vous dire si ça m’est pénible. (Note : il vous suffit de tirer ce lien vers la barre personnelle de votre navigateur pour le récupérer.)</p>
