Pour qu’un message se distingue bien dans une architecture d’informations, il est nécessaire de jouer avec les contrastes colorimétriques. C’est d’autant plus vrai que les besoins en accessibilité deviennent de plus en plus importants avec le vieillissement de la population, et l’effet cumulatif de la hausse de la densité des écrans et de la diminution des dalles dans nos usages (je pense aux smartphones et aux tablettes, évidemment. Qu’il est loin le temps où je bossais sur un écran Mac 30’… sachant que j’écris cet article depuis ma Surface…). Voyons comment réaliser ceci sans en faire trop.

De la couleur.

Pour ceux que la couleur intéresse, je vous rappelle ce post de mon blog traitant du sujet par le travers. Ceci peut constituer une approche intéressante pour ceux qui se posent des questions sur l’usage de telle ou telle tonalité, ou sur les ressources pour trouver la couleur qui correspond à tel projet. Le propos de ce nouveau post est plutôt de traiter de l’écart entre deux tonalités.

Donc, en dehors du fait que tout nos écrans sont mal calibrés et ne renvoient quasiment jamais les couleurs correctes sur l’intégralité du spectre et de manière acceptable sur l’ensemble d’une dalle, il faut bien noter d’abord que notre œil nous trompe, bien aidé en cela par notre cerveau. En effet, une astuce que j’ai apprise très tôt consiste à se promener avec une carte de type Bristol bien blanche dans la poche. Si vous posez ce bristol sur une surface verte, la carte tire dorénavant vers le rose. Si vous posez la même carte sur une surface orange, la carte change de tonalité est tire vers le bleu. Ho, rien de spectaculaire, mais démontrable justement avec cette carte. Il s’agit en effet de la poser contre un mur pour se rendre compte que ledit mur est bien blanc, alors que notre œil le perçoit d’une autre couleur, à cause des aberrations de notre physiologie, ou à cause de l’éclairage ambiant.

La perception des couleurs est donc en grande partie une question de contexte et d’interprétation. L’œil transige intuitivement  et tente d’opposer à une couleur son opposée sur la roue chromatique (voir les travaux de Chevreul sur la loi des contrastes simultanés des couleurs).

La déficience de la vue est bien sûr la caractéristique fondamentale des enjeux de demain des créateurs de pixels. De demain parce que l’informatique règne aujourd’hui en maitre incontesté des systèmes d’informations, mais avec une nouvelle percée des interfaces tactiles qui tend à remplacer jusqu’à nos claviers physiques, dernier rempart interfaciel direct de nos interactions. Et les effets de ces nouveaux usages vont se cristalliser avec le vieillissement de la population. Mais aussi parce que l’usage des systèmes informationnels sont divers et que l’on nous prévoit pour bientôt des montres interactives, des lunettes intelligentes, etc…, qui vont encore plus nous faire basculer dans un univers interfaciel spécifique qui laissera peu de place à la déficience de la vue.

Le contraste

le contraste est le différence de potentiel (conceptuel, énergétique, formel, etc…) entre deux valeurs. Par exemple, le code de la route nous enseigne de manière formelle la différence de potentiel de risque entre une action (panneau carré), une interdiction ou une recommandation (panneaux ronds) et un danger (panneau triangulaire). Au niveau des couleurs c’est un peu la même chose, puisque des couleurs sont associées au risque (rouge, jaune) ou à l’absence de risque (vert, bleu). Et tout ceci est tout de même un peu dépendant de la culture locale.

3076623

Toutefois, en choisissant deux valeurs au sein d’une composition, on obtient à dessein un principe informationnel volontaire où l’on insiste sur certains aspects particuliers. Notamment en accordant une valeur colorimétrique de background et une couleur pour les éléments interactifs.

Il existe 7 grands types de contrastes en design, comme défini par Johannes Itten, professeur de l’école du Bauhaus. Pour être un peu restrictif, nous ne parlerons ici que des valeurs purement additives des couleurs.

Les 7 contrastes

La couleur en soi ou directe

Premièrement, les choses simples: Il s’agit ici d’un concept assez basique, basé sur un tripode de valeurs. Plus ces valeurs sont proches des points de saturation maximum, plus l’effet est fort. En l’espèce, le contraste maximum est obtenu en utilisant le rouge, le vert et le bleu pur. Plus vous pondèrerez ces valeurs, en mélangeant les primaires, moins le contraste sera efficace (mais pas forcément plus laid…).Attention, je ne parle pas ici de variations incluant la saturation ou le niveau de noir ou de blanc de l’échantillon. je ne parle que de l’usage des primaires, donc des couleurs pures. C’est souvent ce genre de contrastes que l’on retrouve dans les compositions de vitraux des églises, pour renforcer la symbolique manichéenne de la religion.

eglise_vitraux225

Le clair obscur

Ne pas confondre bien sûr avec la technique picturale de la Renaissance, popularisée par Léonardo da Vinci. Ici, je parle de la différence de potentiel dans un système à deux valeurs , le noir et le blanc (en simplifiant, puisque toute couleur peut être aussi éclaircie ou assombrie). Bien entendu, le contraste max est obtenu en prenant et mélangeant les valeurs extrêmes de cette échelle. On pensera ici bien sûr aux applications de type “Presse”, dont le texte est souvent écrit en noir sur un background blanc. Si cela fonctionne bien, on veillera aussi à éviter une fatigue visuelle engendrée par de la lecture à forte dose sur des supports très contrastés. Par ailleurs, un écran noir ou sombre est fortement sujet aux reflets de l’environnement. Le noir et blanc, c’est aussi le type d’environnement de couleurs propice à l’accessibilité et permettant un surcroit de lisibilité pour les déficients visuels, en s’affranchissant toutefois de la symbolique des couleurs, ce qui peut engendrer un manque de sens. 

zebra2

Le chaud/froid

Ici, on jouera avec un peu plus de finesse, puisqu’il s’agira d’employer deux valeurs opposées en terme de chaleur. Donc, en pratiquant l’alternance entre des tons froids (bleus, verts) et chauds (Jaunes, rouges), sans distinction de saturation particulière. L’effet maximum est bien sûr obtenu en opposant les couleurs sur la roue chromatique, à la manière des complémentaires (Bleu/Orange, Vert/Rouge). Attention toutefois, car une simple opposition radicale ne sera pas ou peu perçue par les réfractaires à la couleur (oui, les daltoniens, qui représentent environ 8% de la population masculine…).

ChaudFroid

Les complémentaires

Illustration du propos précédant, le contraste complémentaire tire parti du contraste chaud/froid et du contraste de couleur directe, puisque le meilleur rendement de ce contraste s’obtient en opposant des valeurs opposées sur la roue chromatique et par l’emploi de valeurs fortement saturées.. Le rouge pur (255,0,0) et le vert absolu (0,255,0). Attention les yeux ! Ca pique  si c’est employé au pied de la lettre.

Complement

Le contraste de qualité

Les couleurs saturées perdent en valeur de contraste lorsque l’on ajoute du noir (on assombrit), ou que l’on ajoute du blanc (on éclaircit). On peut donc considérer que se créer une différence de potentiel entre une valeur très saturée et une tonalité de la même couleur qui serait plus sombre ou plus claire. Ici, on peut obtenir de jolis effets entre un élément graphique et un autre, mais cela ne s’applique pas du tout pour du texte car le contraste obtenu est globalement moins efficace que celui du clair/obscur. Notez tout de même qu’une couleur désaturée paraitra tout de même vibrante si on la place à coté d’une couleur encore moins saturée…

ContrasteQuali

Le contraste de quantité

Tout ceci serait simple si notre notion de contraste était absolu. Ce n’est pas le cas…En effet, si l’on pose deux couleurs saturées sur un fond gris, notre perception varie sur la dominante. On renforce la dominance d’une couleur ou d’une autre en exagérant la taille des éléments colorés (le nombre de pixels, pour nous) en faveur d’une couleur.

CotrasteQuantite

Le contraste simultané

C’est le fait que notre œil crée des couleurs complémentaires naturellement. C’est le phénomène évoqué plus haut et très bien décrit par Chevreul.  Pour une couleur rouge donné, mon œil va crée des zone vertes. Dont acte. Penser contraste simultané, c’est prendre en compte cette tendance naturelle (ce défaut ?) de notre vision. C’est souvent le cas des trompe-l'œil. Fixez le point ci-dessous et vous comprendrez.

optical-illusion-gif-black-and-white-color

Règles spécifiques aux polices de caractères

En terme d’accessibilité, le W3C propose un ensemble de guidelines très complètes, destinées à l’utilisation de la police et de la couleur, nommé WCAG et dispo ici. Cela vous donnera de bonnes bases en même temps qu’un bon article à relayer. Vous pouvez également trouver à cette adresse un outil assez pratique pour jauger votre taux de contraste visuellement. Ok, ce n’est pas beau, mais c’est très fonctionnel. La forme et le type de police influe aussi bien entendu sur la lisibilité. Pour tester ceci, vous disposez également d’un outil en ligne, à rencontrer ici.

Typetester

Toutefois, tout ceci peut s’exprimer sous forme de pourcentages et de chiffres, de manière à être un peu plus pragmatique. Pour synthétiser ce que nous dit le W3C, voilà quelques pistes:

Si la police fait moins de 18 points, il faudrait que le contraste entre la police et le fond soit au moins de 4,5 pour 1.Si la police fait plus de 18 points, on peut alors se contenter d’un contraste de 3 pour 1. Comment calcule-t-on ce rapport ? Grâce à la formule (L1 + 0.05) / (L2 + 0.05), ou L1 est la valeur de luminance  relative de la couleur la moins forte et L2, la valeur de luminance relative de la couleur la plus forte. La luminance relative se calcule selon une formule qui ressemble à ceci :

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white

Note 1: For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

  • RsRGB = R8bit/255

  • GsRGB = G8bit/255

  • BsRGB = B8bit/255

Si, comme pour moi, ceci vous semble abscons, fiez-vous à votre instinct. Si vous avez du mal à lire, augmentez la taille de la police. Si vous avez encore du mal, augmentez le contraste. Si vous avez toujours des soucis, changez votre police de caractères pour quelque chose de plus lisible.

Quelques exemples

Enfin, voici quelques exemples de contrastes réussis. Saurez-vous retrouver à quel type de contraste ils font référence?

750EuropeTH

BelizeDrillaWeare

AboutthatHolisticColouredline

JoinDiscoverSputnik

Et gardez à l’esprit que je n’ai abordé ici que le contraste de couleurs. Il existe aussi les contrastes de formes, de contenu, de matière,… Autant de choses à tester et expérimenter…