Le bon contraste entre la couleur des polices et les fonds

Dans un article précédent, nous avons parlé du choix des couleurs pour un site web : comment décrire une couleur et comment les choisir. Mais nous n’avons pas abordé un point essentiel : comment s’assurer que le choix des couleurs est compatible avec une lecture facile de notre site ? Le contraste entre les polices utilisées et leur fond est absolument essentiel.

Cet article fait partie d’une série d’articles intitulée choix des couleurs d’un site.

 Les sources documentaires (en anglais)

• Le document de référence du W3C sur les combinaisons de couleur qui assurent un bon contraste
• les règles plus récentes : la formule de calcul WCAG 2.0 du ratio de contraste, qui différencie les polices « grandes » (plus de 18 pixels) et les plus petites.
• une page de « snook.ca » qui permet de vérifier qu’une combinaison de deux couleurs est adaptée

Le principe

Les couleurs du premier plan (souvent du texte) et celles de l’arrière plan (la couleur de la page par exemple) doivent permettre une lecture facile : pour les « bien-voyants », pour les « mal-voyants » ou sur des écrans noir et blanc (à l’impression par exemple).

Voici 3 exemples qui me paraissaient donner assez de contraste :

Spontanément, j’aurais dit que la première et la dernière combinaison sont assez contrastées. Et bien, j’ai tort (ou raison pour la deuxième combinaison).

J’ai passé chacune de ces couleurs au test de snook.ca. Les résultats sont sans appel :

Pourquoi est-ce que j’avais tort ?

Je ne jugeais que le contraste. Il semblerait (source en anglais ici) que quelqu’un qui n’a pas de problème de vue lise très bien dès lors que le ratio de contraste est supérieur à 3:1, ce qui est le cas des 3 exemples choisis. Dès qu’on perd de l’acuité visuelle (en vieillissant par exemple…), il faut un ratio de contraste plus élevé pour lire confortablement. C’est (malheureusement la raison de mon jugement sur la combinaison de couleurs du milieu). On considère qu’il faut un ratio de contraste de plus de 4.5:1 pour les gens dont la vision représente 5/10 (niveau AA) et jusqu’à 7:1 pour une acuité visuelle de 5/20 (AAA).  Le ratio de contraste des trois exemples est suffisant pour une acuité visuelle parfaite et même pour une perte d’acuité jusqu’à 50%. J’avais tort car je n’ai pas pris en compte d’autres éléments de jugement :

• la différence de brillance entre les deux couleurs (seul le troisième exemple est bon) ;
• La différence de couleur (aucun des exemples n’est bon)

Je suis loin de tout comprendre sur ce sujet… Mais je retiens qu’il vaut mieux calculer le respect, ou non, des critères du W3C et du WCAG 2.0 avant de décider quelles couleurs utiliser. Pour celà, le moyen le plus simple est d’aller sur  la page de « snook.ca ».

Mais ces couleurs me plaisent !

J’aimais vraiment bien l’utilisation de  #c5de49 sur fond  #376092  pour mon menu et de  #c5de49 sur fond #404040  pour l’élément actif du menu.

Que faire pour conserver (presque) ce jeu de couleur tout en ayant une meilleure lisibilité ? 

Je retourne sur la page de snook.ca : chaque couleur est définie par un niveau de rouge, vert et bleu (RGB), mais aussi « hue » (ton et teinte en français) et « saturation » (même mot en français). D’après ce que je comprends, une modification du « hue » va sensiblement changer ma perception de la couleur choisie. Mais la saturation va la rendre plus ou moins intense sans trop changer la « couleur » telle que je la nomme.

Si je change un peu la saturation du vert de mes deux derniers exemples, #C8DF57 est compatible avec #404040 et #D0DF8C avec #376092. Je choisis donc de remplacer #376092 par #D0DF8C

AVANT :  #c5de49 sur fond  #376092            #c5de49 sur fond #404040 

APRES :  #D0DF8C sur fond  #376092            #D0DF8C sur fond #404040 

Objectivement, c’est vrai que c’est plus lisible maintenant…

On notera que selon le site HSL color Picker,

• la couleur #c5de49 est rgba(197, 222, 73, 1), soit rgb(197, 222, 73) avec une saturation de 100% ;
• la couleur #C9DF5E est rgba(208, 223, 140, 1), soit rgb(208, 223, 140) avec une saturation de 100% ;

Comment automatiser le choix des couleurs ?

Mon objectif

Je n’ai pas envie d’aller taper des centaines de fois le jeu de couleurs dans les feuilles de style de mon thème.

Je voudrais définir 4 couleurs puis que le thème choisisse automatiquement la couleur de la police à utiliser :

• une couleur primaire (fond du menu),
• une couleur secondaire (page active du menu),
• une couleur de police du menu (probablement aussi celle des liens) ;
• une couleur de police principale.

A partir de ces trois couleurs, il faut que je définisse :

• la couleur de police idéale pour le menu (selon que fond, survol par souris  – « hover » – ou page active) : en principe la couleur secondaire du menu, sinon la couleur de police principale, sinon une de ces deux couleurs avec saturation plus faible)
• la couleur de police idéal pour les liens, voire les titres (doit contraster correctement avec le fond de page par défaut à #fafafa)
• la couleur de police pour les liens du pied de page (dont la couleur est définie par css)
• la couleur du fond des témoignages (couleur primaire en principe), le bord de gauche (couleur secondaire) et la couleur de la police

 La fonction d’évaluation d’une combinaison de couleurs

A terme, il faudra que je crée une extension activable au moment du changement de couleur d’un site pour faire les tests suivants :

Données d’entrée : couleur-primaire / couleur-secondaire / couleur-menu-font / couleur-main-font

Données de sortie :

• validation des combinaisons de couleur possibles selon

A lire attentivement avant d’essayer de créer l’extension :

• http://webaim.org/resources/contrastchecker/ qui utilise un script javascript opensource (jscolor.js, téléchargeable ici) et un autre script javascript contrastchecker.js, que l’on peut copier en allant dans sources du site et on a l’autorisation expresse !)
• http://www.barelyfitz.com/projects/csscolor/
• http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/
• http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

cet article aura, un jour, une suite…

Note du 6 mars 2016

Un site, http://colorsafe.co/, propose des couleurs compatibles avec les bonnes pratiques du WCAG.