Adieu le thème sombre !

Vous l’aurez remarqué – ou pas, si vous ne venez pas souvent – mon thème est repassé en mode « clair ».

Il y a quelques mois, j’ai eu envie de refondre le thème de mon site, surtout d’un point de vue graphique. J’étais lassée de son ancienne apparence. J’ai décidé de partir sur un thème sombre, dans les tons violets. C’était classe, mais avec du recul, c’était un choix très subjectif et pas judicieux : j’aime les thèmes sombres, mais est-ce que tout le monde peut lire confortablement sur un fond sombre ?

Cette réflexion est venue suite à une conversation sur l’accessibilité, et plus précisément sur la perception des contrastes et des couleurs, qui peut être très différente selon les personnes, les troubles de la vision, la taille du texte, mais également le contexte (est-ce que je consulte mon écran au soleil ?).

Donc, on discute des couleurs et des contrastes et de leur impact sur l’accessibilité d’une interface. On parle évidemment d’outils, et ils sont nombreux, pour tester les sites ou juste une combinaison de couleurs.

Parmi ces outils, il y en a un que j’utilise tous les jours, c’est l’outil de développement du navigateur Firefox. Il propose un onglet Accessibilité, qui analyse la page web et recense les problèmes. On peut aussi simuler différentes perceptions des couleurs, notamment certaines formes de daltonisme et la perte de contraste (qui peut-être liée à des maladies, blessures, à l’âge).

Le moment de vérité

Je vais illico tester mon site, parce que c’est bien beau de parler d’accessibilité, mais est-ce que mon propre site l’est, accessible ?
Je lance alors une analyse des contrastes, ouf, aucune alerte.
Puis je simule la perte de contraste, l’écran s’assombri, c’est le drame car c’est illisible, comme en témoignent les deux captures ci-dessous (en premier, sans perte de contraste, puis avec perte de contraste).

Et faut-il vraiment parler du score qui va avec …?

Score de 1.11, la loose totale

La seule bonne nouvelle dans tout ça, c’est qu’il a plu pendant deux jours et que ça se prêtait très bien à passer une journée de week-end devant l’écran.

Après la honte et les larmes, l’action

Oui la honte, car je suis assez sensibles aux questions d’accessibilité et de qualité, et c’est vraiment un comble que mon site soit illisible pour une personne qui perçoit moins bien les contrastes, que ce soit de par son état ou de par le contexte ambiant (le soleil, toujours).
Et non pas les larmes, j’exagère.

Le temps de l’action donc. J’ai une chose simple à faire : virer ce satané fond violet, revenir à du noir sur du blanc.

Oui mais… j’aime ces violets. Alors je choisis un violet sombre sur un fond blanc « cassé ». Je relance mon test en simulant la perte de contraste, et c’est mieux, mais toujours pas valide. J’obtiens un score de 3.26 (précédemment 1.11). J’essaye du noir sur du blanc, et je suis toujours à 3.43. Pas génial, le ratio minimum acceptable étant 4.5.

Un peu de sérieux

Au sujet du contraste, il y a des règles précises, référencées à la fois dans le WCAG (Web Content Accessibility Guidelines) et le RGAA (Référentiel Général d’Accessibilité pour les Administrations). On trouve trois niveaux d’accessibilité (A, AA, et AAA), chaque niveau imposant un rapport minimal de contraste entre le fond et le texte, en fonction de sa taille / graisse. Je conseille à ce sujet la lecture d’un article sur Tanaguru.

C’est le rapport 4.5:1 que je n’obtiens pas en simulant la perte de contraste, même avec une combinaison noir sur blanc. Je reste donc sur mon blanc cassé et mon violet foncé et mon score de 3.26.

Pour conclure

Cela m’a pris quelques heures de créer une nouvelle version de mon thème afin de changer les couleurs, de tester, mettre en ligne, et finalement écrire cet article. Cette version n’est probablement pas parfaite, mais c’est déjà une amélioration.

Dans la vraie vie, celle d’un professionnel du web, ça n’aurait pas été aussi facile. Déjà parce qu’on ne prend pas ses décisions seul, on est souvent en équipe, et surtout on n’est pas à la fois le prestataire et le client.

Peut-être qu’après avoir lu ce billet, vous irez tester quelques sites, et sûrement que vous aurez de mauvaises surprises. Si ce sont des sites que vous avez réalisés, c’est une excellente nouvelle, car vous pourrez alors faire quelque chose pour corriger les problèmes détectés !

Alors pour conclure… la prochaine fois, on pensera à tester nos couleurs avant de réaliser toute une charte graphique et un site, n’est-ce pas ? 😉

Les outils utilisés

Publié par : Marie Comet

Développeuse et intégratrice web indépendante, spécialisée WordPress.

Retrouvez-moi sur :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

3 commentaires sur Adieu le thème sombre !

  • Luis

    Bonjour Marie,
    C’est très bien de penser à l’accessibilité et confort visuel, mais on ne peut pas contenter tout le monde. Pour ma part, je suis photosensible et du coup j’ai du mal à supporter les sites sur fond blanc, à la longue ça me provoque persistances rétiniennes (ce qui est gênant pour lire) et maux de tête.
    De plus, au niveau consommation d’énergie, plus la couleur se rapproche du blanc à l’écran, plus c’est gourmand en énergie (c’est dommage que ça ne soit pas une notion à prendre en compte lors de la conception d’un site ou d’une application). À mon avis, il faudrait trouver un compromis entre les deux et peut être proposer des sites qui laisse le choix à l’utilisateur suivant son confort visuel.
    Bien cordialement.

    • Marie

      Bonjour Luis,

      merci pour ce commentaire.

      En effet on ne peut pas contenter tout le monde, j’en suis consciente, c’est pourquoi je dis que ce changement n’est pas parfait.
      Je suis moi-même assez gênée pour lire sur fond blanc, j’ai tendance à surligner le texte ou carrément changer le CSS du site lorsqu’il s’agit d’un long article (mais je sais que ça n’est pas à la portée de tous).

      L’approche de laisser le choix à l’internaute est intéressante, certains sites le proposent, notamment avec un switch thème clair/sombre. Cependant, ça demande plus de temps (et donc un coût plus élevé) lors de la conception d’un site. D’un point de vue graphique, il faut prévoir deux « chartes », et d’un point de vue technique il faut l’implémenter et surtout le tester correctement, et ça je pense que c’est le plus gros frein.
      Peut-être que ce sera la prochaine évolution de mon thème et le sujet d’un article.

      C’est vrai que côté consommation de bande passante et d’énergie on parle beaucoup de l’optimisation d’images et de fichiers, assez peu de couleurs. J’y penserai lors de mes prochains projets de sites web.

  • Alexandre Rousseau

    Sinon il est possible d’utiliser le media query `prefers-color-scheme` qui permet d’appliquer des règles CSS en fonction du thème choisi dans l’OS de l’utilisateur: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme . Ca contente tout le monde

    Je l’ai implémenté sur mon site perso par exemple : https://rsseau.fr/blog/

facilisis ipsum consequat. mattis venenatis, velit, suscipit amet, ultricies