blog

Vestiges d’un CSS Guru

Billet

Choisir des couleurs en fonction du contraste

Choisir des couleurs pour son site, c’est cool, parce qu’il n’y a pas de limites. Même si l’on est parfois contraint de respecter une certaine homogénéité lorsqu’il s’agit d’un client ayant déjà une charte graphique définie (même partiellement), les couleurs (et surtout leur association) sont un terrain de jeu quasi infini.

Mais le web, même si il est très graphique, reste un support pour le contenu. Et le média le plus répandu reste le texte. Dans ce cas là, le choix des couleurs doit tenir compte de certaines règles en matière de contraste pour éviter de rendre difficile voire impossible à lire votre site web. Le W3C possède une formule pour analyser ce contraste.

Analyser le contraste de son site

AccessColor est un outil gratuit qui analyse les CSS de votre site pour vérifier le contraste entre le texte et le fond. Il évalue alors la différence de luminosité et le contraste (en utilisant le formule du W3C). Mais il ne marche pas pour les images de fond. Mon site, comme vous le voyez, obtient un très mauvais score.

Analyse AccessColor de bbxdesign

Trouver des couleurs suffisamment contrastées

Autant l’outil précédent est utile pour analyser, autant il ne permet pas de décider quelles couleurs utiliser à la place. C’est là que Particletree entre en jeu. En utilisant là encore la formule du W3C, ils ont écrit une fonction en PHP pour définir la couleur d’un élément en fonction de la couleur de fond. Bien sûr, tout ceci est dynamique.

Wufoo Charts