Merci de ne pas imposer le mode sombre

 (iamvishnu.com)
2 points par GN⁺ 2025-01-21 | 1 commentaires | Partager sur WhatsApp
  • Lorsqu’un site web ne propose que le mode sombre, cela peut provoquer fatigue oculaire et inconfort chez certains utilisateurs lisant de longs textes ; il faut donc offrir un choix ou des combinaisons de couleurs confortables
  • Le point essentiel n’est pas le mode sombre en lui-même, mais le rapport de contraste entre le texte et l’arrière-plan ; un texte blanc pur sur un fond noir complet atteint un contraste de 21:1, ce qui peut être éprouvant
  • Utiliser du texte gris #888888 sur un fond noir réduit le contraste à 5,9:1, ce qui constitue un exemple de mode sombre plus lisible qu’un contraste excessif
  • WCAG 2.1 n’exige qu’un contraste minimal de 4,5:1 pour le texte normal et ne fixe pas de limite maximale ; une combinaison à 21:1 peut donc être considérée comme accessible selon les règles
  • L’exigence Maximum text contrast du brouillon de WCAG 3.0 a été supprimée lors de la mise à jour du 4 septembre 2025, et les articles imposant le mode sombre nécessitent aujourd’hui des solutions temporaires comme la surcharge manuelle du CSS

Quand le mode sombre imposé rend la lecture difficile

  • De nombreux sites web et blogs personnels sont conçus exclusivement pour le mode sombre, et certains peuvent provoquer une gêne visuelle avant même d’avoir lu un paragraphe
  • Le mode sombre est utile dans certaines situations, mais lorsqu’il est imposé sans laisser le choix à l’utilisateur, il devient une mauvaise expérience utilisateur
  • Après avoir lu un long texte en mode sombre, les yeux peuvent ne pas se réadapter immédiatement, donnant l’impression de continuer à voir des bandes horizontales

Le cœur du problème : le rapport de contraste

  • En mode sombre, l’élément déterminant pour le confort est le rapport de contraste entre le texte et l’arrière-plan
  • Placer du texte blanc pur sur un fond entièrement noir donne un contraste de 21:1
    • Cette combinaison peut fatiguer les yeux et rendre la lecture difficile
  • Utiliser du texte gris #888888 sur un fond noir fait descendre le contraste à 5,9:1
    • C’est un exemple de combinaison de couleurs plus confortable à lire, même en mode sombre
  • Un contraste plus élevé n’est pas toujours meilleur ; en mode sombre, un contraste excessif peut au contraire accroître l’inconfort

Ce que les critères WCAG ne couvrent pas

  • Actuellement, WCAG 2.1 SC 1.4.3 exige un contraste minimal de 4,5:1 pour le texte normal
  • WCAG 2.1 ne prévoit aucune limite de contraste maximal
    • Une combinaison avec un contraste de 21:1, comme du texte blanc pur sur un fond entièrement noir, peut donc être considérée comme pleinement accessible selon les règles
    • Même si elle peut être inconfortable pour de nombreux utilisateurs, les recommandations actuelles ne traitent pas le problème du contraste excessif en mode sombre
  • WCAG 3.0 devait ajouter Maximum text contrast comme exigence exploratoire
    • Selon la mise à jour de décembre 2025, cette exigence a été supprimée lors de la mise à jour du brouillon de WCAG 3.0 du 4 septembre 2025
    • L’issue GitHub sur les calculs du rapport de contraste reste ouverte

Solutions de contournement possibles aujourd’hui

  • Si un article important n’est disponible qu’en mode sombre imposé, il est possible d’inverser les couleurs en surchargeant le CSS dans les outils de développement du navigateur
  • Si l’on ne veut pas utiliser de plugin séparé, les outils de développement restent une solution temporaire en attendant une meilleure réponse

Quand le mode sombre est bien adapté

  • Il ne s’agit pas de rejeter le mode sombre en lui-même ; il est même préférable dans les situations suivantes
    • Lire sur un écran OLED dans une pièce éteinte, par exemple sur son téléphone avant de dormir
    • Écrire du code, car presque tous les IDE proposent par défaut un mode sombre avec un contraste confortable
    • Lorsqu’un site web propose un mode sombre avec un rapport de contraste confortable
  • Après la publication de l’article, la discussion Hacker News a réuni à la fois approbations et critiques, abordant notamment le choix initial entre mode sombre et mode clair chez les OEM, l’importance du contraste, les expériences personnelles, les conditions médicales, les questions d’accessibilité et les solutions de contournement

À lire aussi

1 commentaires

 
GN⁺ 2025-01-21
Avis de Hacker News

  • Le mode sombre était à l’origine plus proche du réglage traditionnel par défaut.
    C’était le cas des premiers écrans monochromes noirs avec texte vert/ambre, du mode texte DOS gris sur fond noir, du C-64 avec ses caractères bleu clair sur fond bleu foncé, ou encore de l’Apple II en gris/blanc sur fond noir.
    Même dans les interfaces graphiques, l’Amiga avait par défaut un Workbench sur fond bleu foncé, et l’utilisateur pouvait choisir toutes les palettes.
    C’est Microsoft Windows qui a fait du texte noir sur écran blanc le choix par défaut dans la plupart des applications, au motif que cela ressemblait au papier ; or même si le papier est blanc, il n’est pas blanc lumineux, et cette transition a été pénible.
    Je suis content de voir le mode sombre revenir, mais il faut un choix, pas un mode sombre imposé, et j’aimerais aussi que le mode clair, si possible, ne soit pas un blanc à luminosité maximale.

    • Le mode sombre n’est pas le réglage traditionnel par défaut ; le papier, lui, était un fond blanc avec du texte noir.
      Il ne faut pas régler un appareil ou un moniteur sur un blanc éclatant, mais baisser la luminosité pour qu’il ressemble au papier posé à côté.
      Ce n’est pas Windows non plus qui a changé le paradigme : parmi les appareils grand public largement diffusés, le Mac l’a fait avant, et son CRT intégré était moins lumineux que le papier sous un éclairage de bureau traditionnel.
      Les premiers ordinateurs utilisaient des palettes sombres parce que la résolution était faible et que la luminosité des pixels bavait, ce qui les rendait plus lisibles ; avec l’amélioration de la technologie, ce problème a disparu, et un texte sombre sur fond clair est plus confortable pour les yeux, à l’écran comme à l’impression.
    • Le rapport de contraste des vieux CRT n’a rien à voir avec celui des écrans LCD/IPS/OLED modernes.
      L’ambre et le vert étaient aussi considérés comme plus confortables que des caractères blancs, et la différence est telle que la comparaison est difficile.
      Avec un fond doté d’une certaine luminosité plutôt qu’un noir complet, le mode sombre pourrait convenir à davantage de personnes, mais on perd alors l’essentiel des avantages de l’OLED.
    • Parler de réglage traditionnel par défaut n’a rien d’absolu.
      Il est vrai que le DOS/Unix des premiers PC utilisait un fond noir en raison des caractéristiques des écrans de l’époque, mais auparavant on partageait l’information sur du papier blanc, et les débuts d’Internet ont remis au goût du jour le texte noir sur fond blanc.
      Au bout du compte, il n’y a pas de vrai réglage par défaut ; tout dépend du moment où l’on a pris le train en marche.
    • Cette période a été un très bref moment où tout se décidait, et ce sont les contraintes de coût, plus que les préférences personnelles ou l’ergonomie, qui déterminaient les performances informatiques et les modes d’affichage.
      Si l’Amiga Workbench avait un fond bleu foncé, c’était aussi pour des raisons de coût. On s’attendait à ce que beaucoup de gens le branchent sur un téléviseur via une sortie vidéo composite, et les caractères blancs sur fond bleu étaient une combinaison que les téléviseurs affichaient bien.
      Le moniteur 1080 coûtait environ un tiers du prix de l’A1000, et il est très probable que beaucoup d’A500, une fois déballés à Noël, aient été branchés à un téléviseur pendant un certain temps.
      J’ai utilisé presque tous les traitements de texte pour Amiga : sauf WordPerfect, ils étaient tous en texte noir sur fond blanc, et WordPerfect pouvait aussi être modifié ; il conservait simplement le bleu/blanc par défaut pour rester aligné avec DOS.
    • Le mode sombre était normal aux débuts des CRT, et la plupart des CRT de l’époque se rafraîchissaient à 60 Hz ou moins.
      Les fonds sombres rendaient le scintillement moins visible, puis dans les années 1990, quand les CRT à fréquence de rafraîchissement plus élevée se sont généralisés, le problème du scintillement a diminué et le mode clair est devenu la norme.

  • Attendez : si un site web n’a que du texte clair sur fond sombre, c’est son thème et son ambiance.
    Le mode sombre n’existe que lorsqu’il y a un mode clair, et l’inverse vaut aussi.
    On ne peut pas forcer un site web qui n’en a pas envie à maintenir les deux modes.

    • C’est déjà dit au début de l’article.
      Si le mode sombre fait partie de l’identité de marque, il est indiqué de choisir un rapport de contraste confortable pour le texte.

  • Le mode clair par défaut et non configurable a existé longtemps, et des extensions comme Dark Reader existent pour y remédier.
    Mais dans l’autre sens, il n’y a pas beaucoup d’infrastructure pour imposer le mode clair.
    Dans la plupart des situations, je pense que le mode clair est meilleur que le mode sombre. Le seul cas où le mode sombre est préférable, c’est quand on est assis dans une pièce sombre où l’écran est la seule source de lumière, ce qui n’est généralement pas un environnement sain.
    Le mode sombre ressemble davantage à un outil d’appoint ; il vaut mieux allumer la lumière ou dormir.
    Dans un environnement sans lumière, le mode clair peut être désagréable à lire, mais dans un environnement lumineux, le mode sombre est quasiment illisible. Essayez de lire une UI en mode sombre sur un téléphone en plein jour d’été : même avec la luminosité au maximum, on ne voit pas grand-chose.

    • L’extension Dark Reader sur mon système a aussi une option pour forcer un thème clair.
      En fait, les navigateurs permettent de définir une couleur de fond et une couleur de texte par défaut ; si les sites web se contentaient de respecter ces valeurs par défaut quand ils n’ont pas vraiment besoin de faire autrement, aucune extension ne serait nécessaire.
      C’est malheureux qu’il faille une extension pour dire « respectez réellement mes préférences », mais si elle est nécessaire, il est bon de savoir qu’elle prend au moins en charge les deux options. La situation dans son ensemble est assez absurde, mais il existe des contournements.
    • J’ai toujours trouvé étrange que tant de gens veuillent rester assis dans une pièce sombre comme des trolls des cavernes sans raison médicale.
      Désormais, les systèmes d’exploitation disposent tous de modes commutables et peuvent les signaler au navigateur. Le navigateur peut, et devrait, s’adapter au réglage rapporté par l’OS.
      La conception d’UI est, à part quelques îlots de rationalité comme Paul Fitts, essentiellement une succession d’ambiances et de modes mal appliquées.
      D’abord on dit que le contraste est mauvais, donc on en utilise trop peu ; ensuite on dit que la luminosité est mauvaise, donc on en utilise trop peu. Puis on redécouvre pourquoi le contraste et la luminosité étaient importants depuis le départ, et le cycle continue.
    • Ayant eu une cataracte, le mode clair m’était très difficile à lire.
      C’était comme regarder des pleins phares de voiture en face ; j’utilisais bien l’extension Dark Reader, mais ce n’était pas la même chose qu’un site prenant correctement en charge le mode sombre.
    • Le mode sombre peut aussi être préférable lorsque la luminosité de l’écran est réglée de façon excessivement élevée.
    • J’aime le mode Pure Black parce que, sur mon écran, les pixels noirs sont réellement éteints.
      C’est beaucoup plus confortable à regarder même en plein jour. J’aimerais que le mode Pure Black soit une option séparée du mode sombre/clair, comme dans certaines apps Android.
      Pour l’instant, je m’en sors en réduisant la luminosité au minimum dans Dark Reader, mais c’est un peu bricolé.

  • Ce blog lui-même ne respecte pas les réglages de l’appareil et impose le mode clair à ses lecteurs
    L’auteur change d’avis en cours de route et conclut que le problème n’est pas le mode sombre, mais le contraste des couleurs

    • Le blog de l’auteur définit lui aussi explicitement color: #111; et background-color: #fdfdfd;, ce qui donne un rapport de contraste de 18,56:1
    • Le vrai sujet étant le rapport de contraste, le titre paraît un peu malhonnête
      Ironiquement, à la fin, il dit qu’il utilisera un filtre d’inversion comme solution de contournement ; or si quelqu’un qui préfère le mode sombre utilise quelque chose comme l’Invert Mode de Vivaldi sur le site de l’auteur, avec son fond blanc très marqué et son texte noir, on obtient précisément le contraste sombre dont l’auteur se plaint

  • J’aimerais qu’on n’impose pas aux utilisateurs un faible contraste
    Tout le monde ne consulte pas du contenu sur un écran calibré à plus de 100 nits, avec un éclairage ambiant lumineux mais raisonnable
    Les combinaisons gris sur gris recommandées peuvent par exemple être difficiles à lire dans une pièce totalement noire avec la luminosité à 0, ou en plein soleil
    Toute la plage de couleurs SDR est faite pour être utilisée ; ce n’est pas du HDR qu’il faudrait limiter pour éviter d’aveugler l’utilisateur

    • Les combinaisons gris sur gris peuvent aussi être difficiles pour les personnes âgées

  • Ce n’est pas seulement une question de clair contre sombre. J’aimerais que les sites web respectent globalement mes préférences système
    Si le thème de mon système d’exploitation est du texte Comic Sans violet sur un fond jaune brique, le navigateur devrait aussi le respecter
    Si je veux lire le texte sur toute la largeur du navigateur, au lieu d’être limité à une colonne étroite de 5 pouces centrée, je ne devrais pas avoir à faire de la magie dans les paramètres du navigateur, invoquer une CSS de surcharge ou installer une extension
    Le navigateur devrait simplement dire : « désolé, développeur web, c’est comme ça. Les préférences de l’utilisateur l’emportent »
    Les navigateurs ont trop donné aux développeurs le contrôle qui leur permet d’ignorer ce que veut l’utilisateur, au point que l’expression « agent utilisateur » sonne creux. On est désormais plus proche d’un agent développeur

    • Même si l’on ne peut rien faire pour le fond jaune, imposer Comic Sans est facile dans Firefox : il suffit de la définir comme police préférée et de désactiver « Autoriser les pages à choisir leurs propres polices »
      C’est comme ça que je l’utilise, et la navigation web s’en trouve nettement améliorée
    • Les applications de bureau ou autres respectent-elles vraiment ce genre de réglage ?
    • Moi, je ne veux pas ça ; je veux choisir le schéma séparément pour chaque site ou application
      À certains endroits, le mode sombre est excellent ; à d’autres, il est absurde. Même chose pour les thèmes blancs
    • On dirait surtout que tu voudrais utiliser le mode lecture par défaut. Certains navigateurs le permettent

  • Trop de développeurs web partent du principe que tout le monde aime le mode sombre, le mettent par défaut, puis se justifient en disant qu’il y a un bouton de bascule Dark/Light Mode
    Je suis surpris de voir que même des sites web fraîchement créés ne détectent souvent pas les préférences utilisateur et restent figés sur un choix
    En tant que développeur, on peut utiliser la propriété CSS color-scheme pour indiquer dans quels jeux de couleurs un élément peut être rendu confortablement
    :root { color-scheme: light dark; }
    element { light-dark(light-color-code, dark-color-code); }
    En tant qu’utilisateur macOS, j’ai des préférences mixtes : le mode sombre est agréable pour des choses comme la barre de menus ou l’IDE, mais je préfère le clair pour lire, écrire et naviguer
    Il suffit de définir le thème sur LIGHT dans System Preferences, puis d’exécuter defaults write -g NSRequiresAquaSystemAppearance -bool Yes, de se déconnecter, puis de définir le thème sur DARK dans System Preferences
    Pour revenir au thème par défaut, exécutez defaults write -g NSRequiresAquaSystemAppearance -bool No

    1. https://developer.mozilla.org/en-US/docs/Web/CSS/color-schem...

  • Ce qui est drôle, c’est que l’exemple de « texte facile à lire » du blog est, pour moi, vraiment difficile à lire à cause du faible contraste
    Je me demande quel problème de vue ou quel moniteur il utilise

    • À vue de nez, il utilise un moniteur HDR très cher destiné aux designers, et exploite toute la gamme de couleurs partout
    • Je ne comprends pas cette obsession destructrice de lisibilité du gris sur gris sur gris
      C’est insupportable, c’est laid et c’est difficile à lire. J’aimerais que tout le monde arrête
    • Moi aussi je préfère le mode clair, mais sur mon écran à environ 300 dollars, le texte gris est bien plus facile à lire que le texte blanc

  • Il existe une API web pour savoir si l’utilisateur est en mode sombre, donc autant l’utiliser
    @media (prefers-color-scheme: dark) { CSS Rules here... }

  • Le mode sombre était une erreur
    Les premiers LCD étaient sombres, donc tout le monde a fortement poussé le blanc pour compenser ; maintenant que les LCD ont rattrapé leur retard, on en arrive à brûler les yeux d’un bon nombre de personnes
    Résultat, il faut de plus en plus prendre en charge deux modes, et l’icône de mode sombre ridiculement laide d’Apple montre à quel point il est difficile de bien faire les choses
    Idéalement, je pense qu’il faudrait revenir au gris comme couleur de base des interfaces informatiques, comme à l’époque où les CRT lumineux étaient la norme
    Cela aurait aussi l’avantage de donner des indices de profondeur aux éléments d’UI, et il faudrait également ramener cela

    • Ce n’est qu’une préférence personnelle
      L’essentiel est que ce soit configurable, pour que les utilisateurs puissent définir leurs propres préférences
      Personnellement, le mode clair m’éblouit, me fait mal aux yeux et me fatigue. Cela dépend des personnes
    • Les CRT avaient aussi des molettes pour régler facilement la luminosité et le contraste, ce qui permettait à chacun d’ajuster rapidement selon ses préférences, que ce soit texte noir sur fond blanc ou l’inverse
    • « Mettre le gris comme couleur de base », n’est-ce pas déjà ce que fait le mode sombre dans la plupart des cas ?
      Le mode clair n’est généralement pas d’un blanc pur, et le mode sombre est dans des tons de gris