À propos du contraste de couleurs de texte

Actualité ekino -

Voici un peu d'aide pour savoir quel contraste respecter et quels outils utiliser. Bonus : l'infographie récapitulative.

Article paru le :
À propos du contraste de couleurs de texte
Article paru le :

Ce que disent les spécifications

Pour assurer la lisibilité, la couleur de texte doit être suffisamment contrastée par rapport à sa couleur de fond.
Cette limite est fixée par un ratio minimum à respecter entre les deux couleurs.

Pour plus de détails, voir :

Comment respecter ce ratio ?

Ce ratio varie en fonction des référentiels et des niveaux visés.
Voici un tableau pour vous aider à voir, d’un coup d’œil, le ratio qui vous concerne.

Pour respecter la règle… pour du texte de type… le ratio minimum est de…
Opquast Checklist 1, 2 et 3 Grand texte 3:1
Texte courant
WCAG 2.0
Accessiweb
RGAA
AA / Argent Grand texte
Texte courant 4,5:1
AAA / Or Grand texte
Texte courant 7:1

Pourquoi s’occuper de contraste de couleurs

La lisibilité est un critère important de l’expérience utilisateur. Elle contribue à rendre le site utilisable et agréable.

Chaque utilisateur peut être concerné par la question du contraste :

  • un daltonien
    (8% de la population mondiale masculine (et 0,5% de la population mondiale féminine)) ;
  • une personne avec une mauvaise vue ;
  • un “mobinaute” avec un faible contraste sur son écran du à l’ensoleillement
    (32 millions de mobinautes en France(1)) ;
  • etc.

(1) 2012 http://www.proximamobile.fr/article/la-france-compte-plus-de-32-millions-de-mobinautes

Comment mesurer le contraste ?

Des outils permettent de connaître le ratio entre deux couleurs. Certains vous aident même à trouver une couleur approchante mais valide quand la vôtre ne respecte pas le ratio minimal.

Pour vérifier un contraste :

L'outil Colour Constrast Analyser – La validation est indiquée pour 4 niveau de validité.

L’outil Colour Constrast Analyser – La validation est indiquée pour 4 niveaux de validité.

La pastille vous indique le ratio entre deux couleurs.

L’outil Contrast Ratio – La pastille vous indique le ratio entre deux couleurs.

Pour trouver une couleur :

L'outil Tanaguru Contrast-Finder

L’outil Tanaguru Contrast-Finder – Proposition de couleurs alternatives pour respecter le ratio.

Aller plus loin

Si cet article n’a pour but que de vous donner des réponses rapides à des questions pratiques, vous pourrez en apprendre plus dans l’article « Contraste de textes », par Nicolas Hoffmann (sur OpenWeb).

Infographie récapitulative

Téléchargez, imprimez, affichez et partager notre infographie récapitulative sur le contraste de couleurs de texte. Un outil pratique pour savoir en un coup d’œil quel contraste respecter.

Infographie sur les contrastes de couleurs de texte, à imprimer et partager 

Infographie sur les contrastes de couleurs de texte, à imprimer et partager

Remerciements et réutilisation

Je remercie Damien Berseron et Romain Emonet.

Si vous utilisez cette infographie, distribuée sous licence CC BY 3.0 FR (2), nous en serions ravis ! Vous pouvez nous le faire savoir via notre compte Twitter par exemple : @3k1n0 ou via les commentaires ci-dessous.

(2) Cela signifie que vous pouvez partager et adapter ce contenu, sous réserve que vous attribuiez la source à « Ekino – http://www.ekino.com/ » et que vous indiquiez les modifications apportées.

Commentaires (1)
  1. nicod_

    J’ai découvert une extension Firefox qui est assez pratique.
    Un sélecteur permet de choisir un élément, les couleurs d’arrière plan et de texte sont identifiées et analysées, et dans une deuxième fenêtre on nous propose une gamme de couleurs pour valider la règle choisie.

    Bon, le sélecteur se vautre un peu à certains moments et n’identifie pas bien le background, mais la deuxième étape qui propose des couleurs alternatives est très pertinente.

    https://github.com/Tanaguru/Contrast-Finder-Firefox

Laisser un commentaire