Le mode sombre est devenu la norme sur presque tous les sites et applications : les utilisateurs l'adorent, il économise la batterie sur les écrans OLED et il est parfois même considéré comme "plus accessible". Mais le passage à une palette de couleurs sombres, s’il est effectué sans mûre réflexion, peut en réalité nuire à l’accessibilité. Cet article explique comment le faire correctement.
En bref : ce que couvre cet article
Quand le mode sombre facilite l'accessibilité
Pour les utilisateurs souffrant de sensibilité à la lumière (photophobie), de migraines ou de fatigue oculaire numérique, un fond sombre peut réduire considérablement l'inconfort lors d'une utilisation prolongée, en particulier dans un environnement sombre. Certains utilisateurs dyslexiques signalent également une lecture plus confortable sur un fond sombre.
Quand ça fait vraiment mal
D'un autre côté, pour les utilisateurs astigmates (une déficience visuelle courante), un texte clair sur un fond sombre crée un effet de « halo » qui rend les lettres floues - parfois, un fond clair avec un texte sombre est en fait plus confortable à lire. Le résultat : il n'y a pas de bonne réponse pour tout le monde, c'est pourquoi la meilleure solution est de laisser l'utilisateur choisir, et non de lui imposer un mode.
💡 Un point important
Le plus important : ne vous fiez jamais uniquement au paramètre automatique du système (« prefers-color-scheme ») sans donner à l'utilisateur la possibilité de basculer manuellement sur le site lui-même : tous ceux dont le système est en mode sombre ne souhaitent pas que le site soit sombre, et vice versa.
Le contraste en mode sombre est différent du mode clair
Une erreur courante : prendre les mêmes couleurs de texte du mode clair et simplement retourner l'arrière-plan en mode sombre, sans revérifier les taux de contraste. Le noir pur (#000000) sur le blanc pur donne un contraste maximum de 21:1 — mais l'inverse, le blanc pur sur le noir pur, crée un effet de « halo » particulièrement fort qui fatigue les yeux. Il est préférable d'utiliser un fond gris foncé (par exemple #121212) au lieu du noir pur, et du texte blanc cassé (par exemple #e8e8e8) au lieu du blanc pur — cela répond toujours aux exigences de contraste des WCAG (expliquées en détail dans notre guide surcontraste des couleurs), mais il est nettement plus agréable pour les yeux.
Règles pratiques
- Vérifiez le contraste séparément dans chaque mode (clair et sombre) et non une seule fois.
- Évitez les couleurs particulièrement saturées (rouge vif ou bleu) sur un fond sombre : elles ont tendance à « vibrer » visuellement et à rendre la lecture plus difficile.
- Gardez une bascule manuelle sur le site, et ne vous fiez pas uniquement aux paramètres du système.
- Vérifiez les images et les logos conçus pour un arrière-plan clair : ils nécessitent parfois une version distincte pour que le mode sombre reste lisible.
Vos documents sont-ils également prêts pour le mode sombre ?
De nos jours, de nombreux fichiers PDF sont ouverts en mode sombre des applications de lecture. Notre outil vérifie que le contraste du texte dans vos documents répond à la norme dans chaque mode.
Scannez votre site gratuitement ←Après la numérisation, vous pouvez également rendre accessibles directement et gratuitement les documents trouvés viaAccessiDoc.