Présentation

Le daltonisme est une maladie (souvent d'origine génétique) qui touche entre 8 et 10% de la population masculine caucasienne. Il se traduit la plupart du temps par une confusion entre le vert et le rouge, mais peu aussi concerner les nuances de bleu, voire la totalité des couleurs.

Consultez l'article Daltonisme sur Wikipedia, il est simple et complet.

Accessibilité du web

Du point de vue de l'accessibilié du web, il faut veiller à conserver un contraste minimum entre deux couleurs; typiquement pour distinguer la couleur du texte d'avant plan par rapport à la couleur de l'arrière plan.

Les WCAG nous indiquent de ne pas s’en remettre exclusivement aux couleurs. La méthode d'application (des WCAG) AccessiWeb nous indique précisement quoi faire dans la section 3. Couleurs:

  • 3.1 : L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ?
  • 3.2 : Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ?

Dans le cas du daltonisme, c'est surtout le critère 3.2 qui nous intéressera et dans une moindre mesure le 3.1 (concernant l'achromatopsie et surtout la cécité)

Dans un cadre normatif, le fait de déterminer si un contraste est suffisant ne peut faire l'objet d'une appréciation subjective. C'est pour formaliser cette démarche que le W3C a pulié les algorithmes de calcul de contraste de couleurs. Ces algorithmes concernent l'intensité de couleur (colour brightness) et la différence de couleur (colour difference).

Le web designer devra ainsi choisir ses couleurs d'avant plan et d'arrière plan en conservant un minimum de contraste. Les outils vont l'aider.

Outils

On trouve différents types d'outils relatifs aux couleurs sur le web. Il ne s'agit pas de tous les mentionner mais d'en sortir quelques-uns que je trouve utiles.

Outil pour prendre conscience du daltonisme

Un des outils que je préfère est le simulateur de Vischeck. Il prend en entrée une URL puis génère une nouvelle page en fonction du daltonisme choisi (deutéranope, protanope, tritanope).

Logo Google en vision "normale":

google vision "normale"

Logo Google vue en deuteranope:

google vu en deuteranope

Outils pour choisir ses couleurs en tenant compte du daltonisme

Allons du plus simple au plus complexe.

Color Vision de Cal Henderson

Color Vision de Cal Henderson: permet travailler sur une palette de couleurs avec avant plan / arrière plan, le tout en fonction du daltonisme sélectionné. Je trouve cet outil pratique mais il y a mieux.

Interface de Color Vision

Colour Contrast Anayzer

CCA est une application win32 (dont la partie javascript est libre; la DLL sur laquelle il s'appuie ne l'est pas, du moins pas encore). CCA permet de choisir deux couleurs n'importe où à l'écran, y compris dans une page web, puis calcule les différences de luminosité et de contraste pour afficher les résultats.

Hormis le fait que pour l'utiliser je doive changer de machine (je suis habituellement sous Linux), je trouve cet outil très pratique à l'utilisation. Couplé à une palette de couleur, j'aime particulièrement le nuancier de Gimp, on arrive très rapidement à un résultat.

interface de Colour contrast analyzer

Bien que pas indispensable, la lecture de la doc permet de découvrir quelques fonctionnalités pratiques comme les déclinaisons de l'opacité d'une couleur sur fond blanc ou fond noir.

Color scheme generator

Color scheme generator est la formule 1 du choix des couleurs: très performant mais pas simple à maitriser. La lecture de la documentation est recommandée.

Color scheme generator permet de choisir un ensemble de couleur selon une ou plusieurs dominante. Il facilite le choix des nuances en fonction des contraintes d'un client ( p.ex.: mon logo comporte du gris et du orange, je veux ces couleurs sur mon site). Il permet de décliner la/les couleur(s) en teintes plus ou moins pastel, et surtout permet de vérifier le résultat selon plusieurs types de daltonisme.

Interface de Color scheme generator

Seul inconvénient technique, il faut avoir Javascript activé; cependant la présence d'un nuancier et l'aspect web en font un superbe outil complet et multi-plateforme.

Techniques de web design

Une fois les couleurs bien sélectionnées, comment les mettre en oeuvre dans les pages ? Un seul mot: CSS, CSS, CSS !

L'utilisation de CSS (et surtout de (x)HTML strict) permet de séparer le fond de la forme, offrant ainsi une plus grande souplesse pour les modifications futures.

L'utilisation des CSS est importante pour l'accessibilité du web. Elle permet de ne plus recourir aux balises font, b, i et à l'attribut bgcolor. Ces balises et attributs, empechent l'utilisation de CSS personnalisées utilisées par certains visiteurs, qui préfèrent utilser, par exemple, leur propre couleur de fond.

Il est même possible de prévoir plusieurs "feuilles de styles de couleurs" pour laisser à l'utilisateur le choix de ses couleurs préférées. Douglas Bowman nous montre un exemple de mise en oeuvre des "feuilles de styles de couleurs" sur Wired.

exemple d'utilisation de feuilles de style de couleur

Conclusion

Il est désormais facile de bien choisir ses couleurs en s'appuyant sur des outils. Et ainsi de satisfaire près de 10% de la gente masculine !

Remerciements aux membres du webmaster-hub qui m'ont permis de formaliser les grandes idées de cet article.