À propos des contrastes de texte sur le Web

À propos des contrastes de texte sur le Web (le 19 août 2013)

Les contrastes de texte sont vraiment un sujet que je trouve facile à traiter :

  • on a des valeurs plutôt bien établies dans les recommandations,
  • grâce à la puissance de CSS, mettre à jour ces valeurs est d'une simplicité à l'épreuve des balles.

Pourtant, je constate encore que bon nombre de sites ne prennent pas en compte ce point. Si le laïus qui va suivre peut achever de vous convaincre de prendre quelques minutes pour traiter ce point, j'en serai le premier ravi !

Attention, tout ce qui va suivre est un ressenti personnel, n'y voyez donc pas une tentative de règle absolue.

Je constate que quand je reçois des maquettes à intégrer ou quand je crée moi-même une maquette, le point des contrastes est un des premiers que je vérifie.

Avant que cela devienne un réflexe, j'avoue que les valeurs me semblaient arbitraires, pourquoi 4,5 pour 1 et 7 pour 1 ? En fait, le meilleur moyen de comprendre ces valeurs est encore d'être confronté à une maquette qui n'atteint pas la première valeur. Je me suis dit « oh je dénature les couleurs » et en fait, une fois que j'ai trouvé un couple de valeurs correspondant un 4,5 pour 1, la sensation que j'ai est « c'est dur de revenir aux anciennes valeurs », les nouvelles étant quand même bien plus lisibles.

Et idem pour le 7 pour 1, une fois que j'ai la bonne combinaison, en fait, il n'y a rien à changer, c'est tellement agréable à côté d'une combinaison moins contrastée… qu'il me parait impossible de revenir aux précédentes valeurs. C'est confortable, agréable, ni trop ni pas assez.

L'idéal étant de respecter les valeurs de contrastes même pour les diverses formes de daltonisme, pour cela ContrastA est une excellente solution.

Au final, j'ai remarqué qu'être juste ce qu'il faut au-dessus de 7 pour 1 pour valider selon les différentes formes de daltonisme était suffisant, pas besoin d'aller chercher plus loin, les textes trop contrastés par rapport à leur fond sont même plutôt fatigants.

Voici une capture d'écran.

Différentes valeurs de contrastes : 3,24:1 ; 4,58:1 et 8,29:1

La première valeur en partant du bas est clairement insuffisante, je me fatigue les yeux. La seconde est bien plus correcte, je commence à trouver le tout agréable. La dernière offre un réel confort.

Maintenant, quand vous vous poserez la question des contrastes, faites un cadeau à vos lecteurs, offrez-leur le confort. Leurs petits yeux vous en seront reconnaissants.

Pour en savoir plus sur le sujet, vous pouvez lire mon article sur OpenWeb : les contrastes de texte sur le Web.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1581

6 commentaires

Posté par simplementNat le 19/08/2013 à 22:49:40
Bonsoir,

La difficulté pour un graphiste est d'utiliser les couleurs de charte graphique qui ne sont pas nécessairement pensé pour respecter ces règles.

C'est à mon avis du rôle de l'intégrateur que de changer la couleur ensuite… sans pour autant dénaturer la maquette.

Tout un art.
Posté par Luc le 20/08/2013 à 8:12:00
@simplementNat : les couleurs restent du ressort du designer, c'est quand même préférable que ce soit lui qui détermine les bons couples de couleurs. (clin d’oeil)

Perso j'adore Color Contrast Analyzer : http://www.paciellogroup.com/resources/contrastAnalyser
Super simple d'utilisation, pas d'installation nécessaire, pas de page web à ouvrir... c'est mon compagnon de route préféré pour vérifier les contrastes.
Le seul bémol que je lui ai trouvé, c'est qu'on ne peut l'utiliser que sur l'écran principal si on travaille sur 2 écrans ou plus. Mais c'est une contrainte bien minime comparée à sa simplicité et son efficacité !
Posté par Gaël le 20/08/2013 à 9:34:10
@Luc +1 pour le ContrastAnalyzer, c'est aussi mon chouchou en la matière (sourire)

@simplementNat : je plussoie encore Luc. Le rôle de l'intégrateur est d'intégrer les maquettes, et à moins qu'il n'ait également le rôle de designer d'expérience, son rôle se limite à ça puisque même les interactions devraient être pensées par le designer (dans un monde de bisounours, je sais bien (triste) ). C'est un peu trop facile pour le graphiste de taper sur les doigts de l'intégrateur ensuite : le graphiste n'aura pas pris le risque lui-même alors que c'est sa responsabilité.

Concernant les contrastes @Nico, j'apporte toujours la nuance de certains cas pour lesquels les contrastes peuvent être handicapant et qui n'ont jamais été pris en compte dans la rédaction des WCAG (et de ses enfants RGAA et AccessiWeb) comme les cas de dyspraxie et certaines variantes de la dyslexie. Pour avoir testé avec ma compagne enseignante différentes solutions pour faciliter la lecture à des enfants dys-, il s'avère que certains ont besoin d'un contraste moyen voire faible pour ne pas être gênés...

C'est certes extrêmement marginal par rapport au nombre de déficients visuels qui seront aidés par un contraste élevé, mais il faut nuancer la sacrosainte règle du contraste élevé érigée par le W3C, le WAI et leur WCAG car elles sont simplement incorrectes et incomplètes... Aucune solution viable n'existe malheureusement à part les réglages utilisateurs (écrans, systèmes, navigateurs), mais il me semble indispensable de toujours préciser que le contraste fort n'est pas une solution parfaite, et qu'elle peut s'avérer handicapante pour certaines personnes.
Posté par Nico le 20/08/2013 à 9:50:24
@Gaël : Attention, j'ai bien parlé de contraste suffisant, et non de contraste élevé. D'ailleurs, l'article sur OpenWeb mentionne cet état de fait, je me cite :

Le noir pur #000 sur fond blanc pur #fff gêne par exemple les dyslexiques : le contraste trop élevé a tendance à faire « trembler » ou « bouger » les textes. Ce phénomène est décrit sous le nom de « syndrome d’Irlen » ou « syndrome de sensibilité scotopique » et ne concerne pas uniquement les dyslexiques.

Quand aux valeurs, comme on dit : ce ne sont que deux valeurs, et cela contente un maximum de cas, sans pouvoir être exhaustif. Typiquement, dans bon nombre de cas, les contrastes positifs sont préférables, pourtant, certains handicaps préfèrent la lecture sur contraste négatif.

Si la solution parfaite existait, tu penses bien qu'on l'aurait trouvée (grand sourire)
Posté par Gaël le 20/08/2013 à 16:26:31
@Nico : Au temps pour moi, et merci pour la précision !

Il est si rare d'avoir affaire à quelqu'un qui saisit cette nuance, j'en oublie que c'est possible ><
Posté par Alf le 20/08/2013 à 18:17:54
Merci pour ce billet, j'ai découvert Contrast-A et Contrast Analyzer (sourire)
C'est en effet, bien pratique. Sur la nouvelle version de mon site perso, j'ai un contraste de 11,53:1 ... J'ai peur que ce soit un peu trop, du coup (clin d’oeil)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.