Pourquoi éviter les combinaisons de couleurs vibrantes

Dans cet article rapide, vous apprendrez comment la vibration de la couleur affecte la lisibilité de l'interface dans le contexte de la conception d'interface Web..

Audacieux ou Garish?

Les concepteurs d’interface ont de plus en plus tendance à imiter les schémas de couleurs criardes que l’on retrouve souvent dans la conception d’imprimés. Bien que partiellement imputable aux tendances idéologiques, cette impulsion émerge également de la nouvelle gamme typographique mise à la disposition du concepteur de sites Web moderne, qui encourage les dispositions de type impression et les gros caractères. Il est important de noter les distinctions entre chaque support qui font que la couleur vibrante est un peu plus tolérée dans l’impression, et moins pour l’impression Web..

Couleurs vibrantes sur le site de Frooti

En impression, l'utilisation d'un jeu de couleurs audacieux fait souvent la différence entre être ignoré sur un porte-revues et faire une vente. D'autre part, dans l'interface utilisateur, nous avons d'autres considérations à prendre en compte avant d'attirer l'attention de l'utilisateur par la force, en particulier la lisibilité du texte..

Quelle est la vibration?

L'un des principaux phénomènes qui se dégagent des couleurs vives et très saturées est une couleur apparemment «vibrante», un événement dans lequel les bords de deux couleurs directement adjacentes semblent se fondre, se brouiller et s'éclaircir, donnant l'illusion de mouvement..

Les deux échantillons extérieurs ont un texte avec une couleur vibrante, alors que l'échantillon du milieu a un texte avec une valeur d'équiluminant.

Josef Albers, le célèbre théoricien des couleurs, a mis en garde contre l'utilisation de couleurs vibrantes dans son classique, Interactions of Colour:

«Cet effet initialement excitant est également agressif et souvent même inconfortable à nos yeux. On le trouve rarement utilisé sauf pour un effet de cri dans la publicité, ce qui le rend désagréable, déplaisant et évité. ”

Pour qu'une paire de couleurs ait une faible visibilité l'une par rapport à l'autre, il est nécessaire qu'elles soient équiluminantes et qu'elles ont une valeur de luminosité similaire. Cependant, afin de vibrer sensiblement, les couleurs seront généralement de saturation élevée et seront complémentaires les unes des autres, décalées d’environ 180º sur la roue chromatique..

Bleu (HSB 210, 99, 100) sur le rouge (HSB 12, 99, 100)

Dans l’exemple ci-dessus, les teintes rouge et bleue se trouvent de part et d’autre de la roue chromatique (mais pas directement ci-contre) et les deux ont une luminosité de 100.

Spotify EDM

Spotify est devenu synonyme de couleurs vives, utilisé avec un grand effet pour attirer l’attention. Parfois, ces combinaisons peuvent être déroutantes, même si elles ne vibrent pas au sens le plus réel du terme. comme le bouton sur le fond violet dans l'exemple ci-dessus. Les yeux des utilisateurs reconnaîtront ce que c'est, mais certains peuvent avoir du mal à déterminer les bords extérieurs de la forme. 

Lisibilité

Le texte d'interface est considérablement gêné lorsqu'il est réglé sur une couleur vibrante équiluminante. J'ai choisi ces couleurs vibrantes:

Lorsque des vibrations de couleur se produisent, l'élément le plus fortement affecté par l'effet de distorsion luminescente est le bord entre les deux couleurs. C’est pourquoi les vibrations sont particulièrement dangereuses dans le contexte des polices d’interface utilisateur, des petites icônes et d’autres éléments détaillés qui ne sont pas assez grands pour compenser leurs bords vibrants flous..

Voici le même ensemble d'échantillons, cette fois vus par une personne aveugle de la couleur:

En plus des couleurs vibrantes et floues souvent gênantes pour ceux qui voient en couleur, avec des couleurs d'égale luminance, ceux qui sont daltoniens peuvent finir par ne plus rien voir du tout. Bien qu'il existe différents niveaux de daltonisme, il est préférable de jouer prudemment en matière d'accessibilité..

Ici, par exemple, l'icône de la corbeille sur la montre Apple Watch n'est pas visible pour ceux qui sont daltoniens:

Vision des couleurs (à gauche) versus daltonisme (à droite)

Conclusion

Les couleurs vibrantes peuvent être utilisées à bon escient, mais elles présentent de réels dangers pour la convivialité des interfaces utilisateur et peuvent être lourdes si elles ne sont pas délibérément prises en compte avant leur utilisation. Gardez cela à l’esprit lors de la conception!