BlogAjouter à Chrome — gratuit

Quel contraste choisir en mode sombre ?

Publié le

Deux cartes avec des lignes de texte blanches côte à côte, l'une gris moyen et l'autre gris foncé, au-dessus d'un bouton de contraste

En bref : Selon les règles d'accessibilité du W3C, un texte doit avoir un rapport de contraste d'au moins 4,5:1 avec son fond, ou 3:1 pour un grand texte.[1] La règle ne change pas en mode sombre. Mais plus n'est pas toujours mieux : Google évite le blanc pur sur fond sombre pour empêcher un effet de halo qui « bave ».[2][3]

Passez une page en sombre à la va-vite, texte blanc sur fond noir, et vous obtenez le contraste maximal. Le résultat ressemble souvent à une enseigne au néon à deux heures du matin. Les bons thèmes sombres visent plus fin : assez de contraste pour lire, pas au point que les lettres scintillent.

Le minimum : 4,5:1, quel que soit le thème

Les règles pour l'accessibilité des contenus web (WCAG) fixent la barre. Un texte doit avoir un rapport de contraste d'au moins 4,5:1 avec son fond. Un grand texte, soit 18 points ou 14 points en gras, peut descendre à 3:1.[1]

Les rapports de contraste vont de 1:1 (aucune différence) à 21:1 (noir sur blanc).[1] Le calcul repose sur la luminosité, et la teinte n'y joue pas un rôle clé.[1] La règle est donc la même en clair et en sombre : un texte gris sur fond gris foncé doit franchir la même barre qu'un texte gris sur blanc.

Le W3C précise aussi que ces rapports sont des seuils, pas des arrondis : 4,499:1 ne passe pas.[1] Les designers ne rigolent pas avec ça.

Pourquoi on évite le blanc pur sur fond sombre

Si le contraste minimum est le plancher, le plafond est-il 21:1 ? En mode sombre, rarement. Le guide web.dev de Google sur les thèmes sombres explique qu'il évite le blanc pur et choisit un blanc légèrement plus sombre, pour empêcher le texte de briller et de « baver » sur le fond sombre. Par exemple rgb(250, 250, 250).[2]

Android suit la même idée. Sa couleur de texte principale est décrite comme quasi noire en thème clair et quasi blanche en thème sombre.[3] Quasi, pas pure.

Notre lecture : un texte très clair sur un fond très sombre peut paraître plus dur que ne le disent les chiffres, surtout sur un écran lumineux dans une pièce sombre. Adoucir un peu le blanc garde un contraste élevé tout en retirant ce côté agressif.

Les images aussi demandent du soin

Le texte n'est pas seul en cause. L'auteur du guide web.dev rapporte que, dans ses propres recherches auprès d'utilisateurs, la majorité des personnes interrogées préféraient des images un peu moins vives et éclatantes en mode sombre.[2] Une photo en pleine luminosité au milieu d'une page sombre peut faire l'effet d'une lampe torche.

Ce que ça change pour vous

Docs, Sheets et Slides en vrai mode sombre. Keeptab Dark passe toute la page de Google Docs, Sheets, Slides et Excel en sombre. Les images gardent leurs couleurs, sans flash blanc. Alt+Maj+D l'allume ou l'éteint.

Ajouter à Chrome — gratuit

Des documents sombres et lisibles

Keeptab Dark est notre extension Chrome qui assombrit la page elle-même dans Google Docs, Sheets, Slides et Excel en ligne.[4] Son thème gratuit est Gris doux, pas du noir pur, et le quadrillage de Sheets et d'Excel reste lisible.[4] Les images gardent leurs vraies couleurs, et Pro ajoute des images adoucies pour lire tard le soir.[4]

FAQ

Quel est le rapport de contraste minimum pour un texte ?

Selon les WCAG, au moins 4,5:1 entre le texte et son fond, ou 3:1 pour un grand texte (18 points, ou 14 points en gras). La règle est la même en thème clair et en thème sombre.

Faut-il du texte blanc pur sur noir pur en mode sombre ?

Non. Le guide web.dev de Google évite le blanc pur sur fond sombre pour empêcher un effet de halo, et Android utilise un texte quasi blanc en thème sombre.

La couleur influe-t-elle sur le rapport de contraste ?

Peu. Le W3C calcule le contraste à partir de la luminance relative, et la teinte n'y joue pas un rôle clé. Ce qui compte, c'est l'écart de clarté entre le texte et le fond.

Sources

  1. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) (en anglais). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
  2. web.dev (Google). prefers-color-scheme: Hello darkness, my old friend (en anglais). https://web.dev/articles/prefers-color-scheme
  3. Android Developers. Implement dark theme (en anglais). https://developer.android.com/develop/ui/views/theming/darktheme
  4. Keeptab Dark. Le mode sombre pour Google Docs, Sheets, Slides et Excel. https://keep-tab.com/fr/dark/

Docs, Sheets et Slides en vrai mode sombre

Keeptab Dark passe toute la page de Google Docs, Sheets, Slides et Excel en sombre. Les images gardent leurs couleurs, sans flash blanc. Alt+Maj+D l'allume ou l'éteint.

Ajouter à Chrome — gratuit

Autres articles