Dark mode et accessibilité

Il y a quelques semaines des collègues designers qui travaillaient sur le dark mode 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.

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 :

Pour ma part je fuis purement et simplement le dark mode, 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.

Je suis le cas typique du client qui a besoin obligatoirement d’un light mode, 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 dark mode, 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.

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 etc.), mais il est pour moi hors de question de passer en dark mode.

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 dark mode proprement impossible à utiliser.

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 media query CSS 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.

Pour finir sur une note rigolote, pour le fun, voilà un joli exemple de light/dark mode avec une media query : le site personnel de Dave Rupert.

(il suffit de basculer votre système de l’un à l’autre)

Il joue notamment avec les filtres sur l’image, qui passe un filtre à brightness(0.9) contrast(1.2) en dark mode, c’est très malin.

En clair : faites un dark mode 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 bookmarklet pour forcer automatiquement le site en noir sur blanc (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.)

Commentaires

  • Nicolas Hoizey (13 avril 2021)

    Tout comme toi, je préfère lire la prose en foncé sur clair, mais par contre je suis passé en clair sur foncé pour le code, va comprendre.

    J’ai été rassuré en lisant que Sara Soueidan a les mêmes préférences, ainsi que 60 % de ceux qui ont répondu à son sondage Twitter :

    I love dark UI themes for everything except reading. No matter how good the contrast, the text looks like it’s glowing, which makes reading long blocks of it painful.

    If you have a blog & switch to dark mode using native preferences, please provide a switch back to light. 🙏

    En tout cas, nous avons apparemment une vision « normale », d’après ce que dit une publication récente de Nielsen Norman Group :

    In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia.

    Répondre à Nicolas Hoizey

  • Nico (13 avril 2021)

    Même si j’ai fait tous les dark modes des apps Proton v4... je préfère de loin les contrastes positifs, ça me fatigue moins la vue.

    Je me permets de citer ce vieux mais j’espère bon article https://openweb.eu.org/articles/accessibilite_contrastes_textes_sites :

    Le noir pur #000 sur fond blanc pur #fff gêne par exemple les dyslexiques : le contraste trop élevé a tendance à faire « trembler » ou « bouger » les textes. Ce phénomène est décrit sous le nom de « syndrome d’Irlen » ou « syndrome de sensibilité scotopique » et ne concerne pas uniquement les dyslexiques.

    Répondre à Nico

  • Nicolas Hoizey (13 avril 2021)

    @Nico c’est effectivement important de ne pas avoir le contraste extrême, très gênant ! 👍

    Répondre à Nicolas Hoizey

  • Emmanuel (13 avril 2021)

    Je ne suis pas sûr de bien comprendre : tu parles ici de sites web et/ou applications dont l’unique style graphique est sombre et qu’on ne peut du coup pas modifier, n’est-ce pas ?

    C’est le terme « dark mode » qui me chiffonne, car en ce moment, quand je l’entends, je pense directement à la fonctionnalité CSS (https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme).

    Si cette fonctionnalité est utilisée à la conception, elle s’impose également à l’utilisateur selon son choix système, mais pouvoir la modifier à nouveau au plus haut niveau resterait intéressant, à savoir au niveau de l’interface.

    Disposer des deux fonctionnalités serait le confort ultime : je choisis sombre sur mon système, mais le site me laisse encore la possibilité de basculer en clair (sans parler d’éventuels navigateurs ne prenant pas en charge la modification au niveau système (https://caniuse.com/?search=prefers-color-scheme).

    Idem que Nicolas Hoizey, je lis en clair (à vrai dire en assourdi, avec le mode lecture du navigateur souvent) et je code en sombre.
    Au confinement initial j’étais dans une pièce très ensoleillée l’après-midi chez moi : le matin, sur SublimeText, j’utilisais un mode sombre, et l’après-midi je basculais en clair. J’avais même des intermédiaires selon la luminosité et ma forme 🙂

    Répondre à Emmanuel

  • Emmanuel (13 avril 2021)

    Nicolas et Nico, d’ailleurs, le sujet du contraste maximum revenait justement ces jours-ci dans mon travail et j’en cherchais des sources (merci pour le rappel de l’article d’OpenWeb au passage).

    Si les outils de vérification de contraste donnent les limites basses, je n’en connais en revanche pas donnant de limites hautes et qui déconseilleraient le contraste maximum #000 sur #fff. Ce serait bien pratique aussi.

    https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=FFFFFF

    Répondre à Emmanuel

  • Stéphane (13 avril 2021)

    Emmanuel :

    Je ne suis pas sûr de bien comprendre : tu parles ici de sites web et/ou applications dont l’unique style graphique est sombre et qu’on ne peut du coup pas modifier, n’est-ce pas ?

    Je veux dire qu’on m’a demandé mon avis sur le dark mode et j’ai explicité le besoin de ne pas avoir que cette option.

    Si c’est ta préférence (notamment à travers prefers-color-scheme), qu’on te le serve, soit.
    Mais qu’on me l’impose me posera des soucis importants.

    Répondre à Stéphane

  • Stéphane (13 avril 2021)

    Emmanuel :

    Disposer des deux fonctionnalités serait le confort ultime : je choisis sombre sur mon système, mais le site me laisse encore la possibilité de basculer en clair (sans parler d’éventuels navigateurs ne prenant pas en charge la modification au niveau système.

    Je crois comprendre que c’est ce que fait github, oui (et c’est cool). Et je dis comme toi. Et je ne parlais bien que du mode sombre (traduction littérale), pas des mécanismes de choix et/ou de prise en compte des réglages système.

    Répondre à Stéphane

  • galex-713 (15 avril 2021)

    Je ne vois que d’un œil, et c’est le contraire : je préfère le dark mode en permanence, le light mode me déchire les yeux et me fatigue.

    Cette hypothèse est donc à jeter, et faut en trouver une autre. Je commence fortement à me demander du coup si ma propre préférence pour le dark mode serait pas dûe à un effet nocébo, et qu’au final ça change rien… c’est peut-être culturel ?

    Ou alors autre chose qu’on a pas encore trouvé. En tout cas intéressant de trouver que tout le monde ne trouve pas le dark mode supérieur quand il a expérimenté les deux.

    Autre chose : sur un écran OLED (les écrans modernes), un thème sombre consomme moins d’électricité.

    Répondre à galex-713

  • Stéphane (25 avril 2021)

    Un très bon rebond de David qui résume exactement le besoin :

    C’est la raison pour laquelle — même après avoir cédé à la mode du foncé — je laisse la personne qui consulte cet espace choisir. Utiliser les préférences du système (prefers-color-scheme) me semble être insuffisant. Certain·es préfèrent un thème sombre sans pour autant vouloir lire du clair sur foncé, d’autres ne savent pas comment changer le thème au niveau du système.

    Répondre à Stéphane

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.