Webdesign — Après le contenu, le contraste est roi !

Le contraste est la différence que l’oeil perçoit entre des couleurs qui sont à proximité les unes des autres. Le contraste est un élément indispensable pour rendre un site accessible au plus grand nombre. Le contraste ne se limite pas à l’utilisation du noir et blanc. Il est possible d’utiliser toute la gamme des couleurs disponibles à condition d’être vigilant sur les combinaisons des couleurs que l’on choisit. Pour cela, il existe un certain nombre d’outils pour convertir les couleurs de la page en niveaux de gris ou choisir des palettes de couleur en tenant compte des pathologies de la vision, par exemple.

Graybit

Graybit — C’est un bon outil pour savoir si le contraste général d’une page est correct en convertissant les couleurs en niveaux de gris. Le texte est-il toujours lisible ? Est-ce que la hiérarchie visuelle fonctionne toujours sans les couleurs ? C’est le bon moment pour noter ce qu’apporte la couleur dans le fonctionnement de votre design !

Si vous êtes encore dans un processus de création graphique, n’hésitez pas à utiliser le mode niveau de gris de votre application d’édition d’image préféré. Dans Photoshop, il suffit d’aller dans Image -> Mode -> Niveaux de gris pour avoir une idées du contraste global de votre design.

Nocturne

Nocturne — C’est une application qui bascule votre environnement de travail en niveaux de gris. Pratique, si vous devez développer uniquement pour des personnes malvoyante : même votre palette de couleur Photoshop sera en niveaux de gris ! Apparemment disponible pour Mac OS X 10.4 et 10.5.

Color Scheme Designer

Color Scheme Designer — Une fois que la question des contrastes est réglée, il est temps de passer à la couleur. Outre la possibilité de créer des palettes de couleur en toute simplicité, l’application offre des options pour simuler les nombreuses pathologies qui affectent la vision et dont le daltonisme n’est que la partie émergée de l’iceberg. Lire 50 Facts about Color Blindness pour en savoir davantage sur ces pathologies.

Coblis–Color Blindness Simulator

Coblis–Color Blindness Simulator — Téléchargez une image et l’outil vous proposera de l’afficher comme si vous étiez atteint d’une des 9 pathologies touchant la vision des couleurs : Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly, Achromatopsia, Monochromacy

Check my colours

http://www.checkmycolours.com — Vérifiez les ratios entre les couleurs de premier plan et d’arrière-plan des éléments qui composent le DOM de votre page web pour s’assurer que les contrastes sont suffisant. Le résultat est une analyse complète et détaillée des points faibles de votre page sous forme d’un tableau. Un clic sur une ligne vous permettra de tester une autre couleur.

Ecrit d’après Contrast is King de Lesli Jensen-Inman paru sur A List Apart.

Ne partez pas si vite 😉

1. Choisir sa palette de couleur
2. Votre palette de couleurs avec Color Palette Generator
3. CSS Color Editor remplace automatiquement les couleurs dans vos CSS
4. Avec Color Blender, Eric Meyer ne me quitte plus 😉
5. 0 to 255 — Trouvez les variations autour d’une couleur de base
6. 15 « Photoshop-like » en ligne testés et commentés
7. Guide stylistique — Exemple de charte graphique et éditoriale
8. Quelques notes sur la conception d’une charte graphique