Couleurs complémentaires, triadiques et analogues : comment rendre chaque harmonie lisible

Les harmonies de couleurs sont des règles empiriques anciennes, et elles répondent à une question plus étroite que celle qu’on leur pose. Elles disent quelles teintes vont ensemble. Elles ne disent rien sur la possibilité de lire l’une de ces teintes sur une autre, et la raison tient à l’arithmétique même du contraste.

Les trois harmonies, définies

Les couleurs complémentaires sont deux teintes situées de part et d’autre du cercle chromatique, à 180° l’une de l’autre.

Les couleurs triadiques sont trois teintes réparties régulièrement sur le cercle, à 120° les unes des autres.

Les couleurs analogues sont une teinte de base et ses voisines ; l’outil d’harmonies de couleurs utilise les teintes situées à 30° de part et d’autre.

Ces règles sont des conventions anciennes, pas des résultats de mesure. Leur intérêt est de réduire un espace de choix infini à une poignée d’options que vous pouvez justifier. L’outil en propose six, et la note qu’il affiche sous chacune mérite d’être lue comme une étiquette de mise en garde.

Harmonie	Décalages de teinte depuis la base	Couleurs	Ce qui les sépare	La note de l’outil
Analogues	0°, −30°, +30°	3	La teinte	Teintes voisines. Calme, et le choix par défaut le plus sûr pour les interfaces.
Complémentaires	0°, 180°	2	La teinte	Teintes opposées. Séparation maximale, ce qui en fait aussi la plus facile à surutiliser.
Triadiques	0°, 120°, 240°	3	La teinte	Trois teintes régulièrement espacées. Vivante, et difficile à équilibrer sans qu’une couleur domine.
Complémentaires adjacentes	0°, 150°, 210°	3	La teinte	La teinte opposée, scindée en deux. L’essentiel du contraste, avec moins de tension.
Tétradiques	0°, 90°, 180°, 270°	4	La teinte	Deux paires complémentaires. Riche, et généralement une paire de trop pour une interface.
Monochromatique	Aucun ; luminosité 0.32, 0.52 et 0.72	3	La luminosité	Une teinte à différentes luminosités. Résiste à toutes les formes de daltonisme.

La « séparation maximale » de la note sur les complémentaires est une séparation de teinte. Comme le montre la section suivante, ce n’est pas une séparation de contraste.

Pourquoi une harmonie ne peut pas promettre de contraste

Le ratio de contraste WCAG se calcule à partir de la luminance relative, et de rien d’autre. La luminance est une somme pondérée des canaux rouge, vert et bleu linéarisés, 0.2126 R + 0.7152 G + 0.0722 B, et le ratio ne comporte aucun terme pour la teinte. Deux couleurs de teintes quelconques à la même luminance obtiennent 1:1.

L’outil d’harmonies rend cela concret. Chaque couleur obtenue par rotation est construite avec la luminosité et la chroma OKLCH de la base, seule la teinte tourne. Quand une teinte tournée ne peut pas conserver cette chroma à l’écran, la chroma est réduite et la luminosité laissée intacte. Chaque membre d’un jeu complémentaire, triadique, analogue, complémentaire adjacent ou tétradique a donc la même luminosité OKLCH que la base.

Pour des couleurs neutres, une même luminosité OKLCH signifie exactement la même luminance : le ratio serait donc exactement de 1:1. Des teintes réelles à une même luminosité diffèrent un peu en luminance ; attendez-vous donc à des ratios entre membres proches de 1:1, très loin du 3:1 qu’exige même le grand texte. Une paire complémentaire peut paraître éclatante et rester illisible quand l’une sert de texte sur l’autre.

Le monochromatique fait exception, car il fait varier la luminosité. Ses trois couleurs sont construites aux luminosités OKLCH 0.32, 0.52 et 0.72 dans la teinte de la base, quelle que soit la luminosité de la base elle-même : la couleur saisie n’en fait donc pas partie, sauf si sa luminosité correspond à l’une d’elles. Pour une version neutre, où la luminance relative est le cube de la luminosité OKLCH, le calcul donne :

• la plus sombre sur la plus claire : (0.72³ + 0.05) ÷ (0.32³ + 0.05) ≈ 5.1:1
• celle du milieu sur la plus claire : (0.72³ + 0.05) ÷ (0.52³ + 0.05) ≈ 2.2:1
• la plus sombre sur celle du milieu : (0.52³ + 0.05) ÷ (0.32³ + 0.05) ≈ 2.3:1

Seule la plus sombre sur la plus claire forme une paire utilisable pour du texte courant, et avec peu de marge. L’outil affiche le ratio de chaque couleur sur blanc et sur noir, mais pas entre membres : pour comparer deux échantillons entre eux, divisez le plus grand chiffre « sur blanc » par le plus petit. Le 1.05 de la formule s’annule, ce qui rend ce calcul exact avant arrondi.

Construire une harmonie et lire son audit

1. Définissez la couleur de base. Utilisez l’échantillon ou saisissez une valeur dans le champ hex à côté ; il accepte hex, rgb(), hsl() ou oklch(). L’outil s’ouvre sur #2563eb.
2. Choisissez une harmonie. Six boutons sous Harmony (harmonie), avec la note de l’harmonie active en dessous. La touche H passe à l’harmonie suivante sur la même base, et Random base (base aléatoire, ou la touche R) garde l’harmonie et tire une nouvelle base.
3. Lisez chaque échantillon. Sous son code hex figurent deux lignes, on white (sur blanc) et on black (sur noir), chacune avec un ratio et un verdict : AA, large only (grand texte uniquement) ou fails (échec). Comme les deux ratios d’une couleur donnent toujours 21 une fois multipliés, chaque échantillon passe AA sur l’un des deux fonds. Ce qui compte, c’est le fond sur lequel votre texte sera posé.
4. Lisez le panneau d’audit. Son titre affiche Every pair survives colour blindness (chaque paire résiste au daltonisme) ou indique combien de paires se confondent. Chaque paire qui se confond est listée avec les types de vision où elle échoue. Le test simule huit types de déficience de la vision des couleurs et signale toute paire dont la distance CIEDE2000 tombe sous 11.
5. Copiez le CSS. Le panneau du bas écrit le jeu sous la forme --palette-1, --palette-2 et ainsi de suite, et Copy le place dans le presse-papiers. Share copie un lien vers le même jeu, et Save here le conserve sur cet appareil.

Rendre chaque harmonie lisible

Le principe commun à toutes : gardez l’harmonie pour les aplats, les accents et les séries de graphiques, et prenez le texte dans un changement de luminosité de l’une de ses teintes.

Complémentaires

Deux couleurs à une même luminosité. Aucune ne fonctionne comme texte sur l’autre : laissez l’une occuper l’essentiel de la surface et utilisez l’autre avec parcimonie. Pour le texte, prenez un palier sombre de l’une ou l’autre teinte ; le générateur d’échelles et de tokens construit onze paliers d’une teinte et désigne celui qui dépasse 4.5:1 sur blanc.

Triadiques et complémentaires adjacentes

Trois teintes à une même luminosité, qui rivalisent toutes avec le même poids visuel. Choisissez-en une pour dominer, comme le conseille la note de l’outil, et prenez le texte dans un neutre ou un palier sombre plutôt que dans le jeu. Ce sont aussi les jeux où la teinte assure toute la séparation : lisez donc l’audit avant de vous en servir pour distinguer quoi que ce soit, par exemple les séries d’un graphique.

Analogues

Des voisines espacées de 30° à la même luminosité ne comptent que sur la teinte pour rester distinguables. Cela les rend calmes en fond et en accent, et cela signifie que l’audit de vision des couleurs est la vérification à croire si deux d’entre elles doivent signifier des choses différentes. Séparez ces deux couleurs par la luminosité, ou ajoutez un second indice : les notes de l’outil renvoient au critère WCAG 1.4.1, qui demande que la couleur ne soit jamais le seul vecteur de sens.

Monochromatique

Déjà séparée par la luminosité, c’est pourquoi la note de l’outil indique qu’elle résiste à toutes les formes de daltonisme. C’est la seule harmonie qui contient sa propre paire de texte : le membre le plus sombre sur le plus clair, à environ 5:1 selon le calcul neutre ci-dessus.

Autres façons de faire

Il n’existe pas de méthode intégrée sur macOS, Windows ou iPhone pour construire des harmonies de couleurs, ni de solution en ligne de commande parmi celles que ces guides garantissent. Sur papier, un cercle chromatique vous donne les angles ; le vérificateur de contraste vous indique ensuite lesquels des résultats peuvent porter du texte, et la version la plus proche de chacun qui le peut.

Vérifier que rien n’est envoyé

Rien n’est envoyé, parce qu’il n’y a rien à envoyer : la couleur de base et l’harmonie sont stockées après le # dans la barre d’adresse, et les navigateurs n’envoient pas cette partie d’une URL au serveur. Surveillez le panneau Réseau des DevTools pendant que vous changez d’harmonie : vous ne verrez aucune requête qui les transporte.

Ouvrez l’outil d’harmonies de couleurs, essayez votre base en triade puis en jeu monochromatique, et comparez ce que dit l’audit. Pour construire dès le départ un jeu qui résiste aux déficiences de la vision des couleurs, consultez comment créer une palette adaptée aux daltoniens.