Les couleurs d'état de Bootstrap et Tailwind échouent pour les personnes daltoniennes

La plupart des design systems proposent un rouge pour les erreurs et un vert pour les succès. La convention est si bien établie que personne ne la vérifie. Nous avons mesuré ce que deviennent ces couleurs par défaut sous une simulation de déficience de la vision des couleurs, et les chiffres sont pires que ce que la convention laisse croire.

Ce que nous avons mesuré

Nous avons pris les couleurs d’état par défaut de deux systèmes très répandus et calculé la distance perceptuelle CIEDE2000 entre chaque paire rouge et vert : d’abord pour une vision typique, puis pour chaque déficience simulée à l’aide du modèle de Machado et al. (2009).

Pour simplifier, une distance inférieure à 10 environ signifie que deux couleurs sont difficiles à distinguer côte à côte. En dessous de 5, elles se lisent comme une seule et même couleur.

Paire	Typique	Deutéranopie	Protanopie	Achromatopsie
Bootstrap danger / success	74.1	4.0	25.4	10.0
Tailwind red-500 / green-500	76.1	7.8	25.9	12.9
Rouge / vert génériques	70.6	6.0	23.0	10.1
Bleu / orange	62.4	74.2	66.1	28.7

La deutéranopie est la colonne qui compte le plus, car la deutéranomalie, sa forme atténuée, touche environ 5% des hommes. Pour ces utilisateurs, les états d’erreur et de succès de Bootstrap sont séparés par une distance perceptuelle de quatre. Ce n’est pas une légère dégradation : c’est la même couleur.

La dernière ligne sert de témoin. Le bleu face à l’orange ne se contente pas de tenir le coup : il se distingue davantage en deutéranopie qu’avec une vision typique.

Pourquoi tous les audits de contraste passent à côté

C’est le point à bien assimiler, car il explique comment le problème survit dans des systèmes par ailleurs construits avec soin.

Un vérificateur de contraste pose une seule question : ce premier plan se distingue-t-il de cet arrière-plan ? Le #dc3545 de Bootstrap sur blanc donne 4.53:1. Son #28a745 sur blanc donne 3.01:1. Les deux restent dans la zone acceptable, les deux sont validés.

Mais le vérificateur ne compare jamais le rouge au vert, puisqu’ils ne sont jamais superposés. Ils apparaissent à des endroits différents, l’un sur la notification d’erreur, l’autre sur la notification de succès, et l’outil n’a aucune notion de relation entre eux.

Les défaillances liées au daltonisme se logent précisément dans cet angle mort. Ce sont des défaillances entre deux couleurs de premier plan, alors que la chaîne d’outils standard ne teste que le premier plan contre l’arrière-plan.

La protanopie est différente, et c’est important

Vous remarquerez que la protanopie obtient de bien meilleurs scores dans le tableau : autour de 25 au lieu de 4. Ce n’est pas parce que les personnes protanopes distinguent facilement ces couleurs.

La protanopie implique une sensibilité réduite à la lumière rouge dans son ensemble : les rouges paraissent donc plus sombres, en plus d’être décalés en teinte. C’est cette différence de luminosité qui fait remonter la distance : les deux couleurs deviennent distinguables, mais par la clarté plutôt que par la teinte.

Ce qui donne une piste utile pour la correction.

Ce qui fonctionne vraiment

Séparer par la luminosité. La perception de la luminosité n’est affectée par aucune déficience rouge-vert. Si vos couleurs d’erreur et de succès diffèrent nettement en luminosité, en plus de la teinte, elles restent distinguables quoi que fassent les cônes. Ce seul changement corrige la plupart des palettes.

Utiliser l’axe bleu-orange pour les encodages à deux valeurs. Graphiques, interrupteurs, comparaisons avant/après. Le bleu face à l’orange est l’association de deux couleurs la plus robuste qui soit, et la mesure ci-dessus montre pourquoi.

Ne plus faire porter le sens à la seule couleur. C’est la correction qui satisfait réellement les WCAG, et celle qui ne dépend pas d’un calcul juste. Le critère de succès 1.4.1 exige que la couleur ne soit jamais le seul moyen de transmettre une information. Concrètement :

• Une icône sur l’alerte, pas seulement une bordure colorée
• Des étiquettes directes sur les séries d’un graphique, pas seulement une légende de couleurs
• Des lignes pleines ou en pointillés
• Le mot « Erreur » dans le message d’erreur

Dès qu’un second indice est présent, la palette ne porte plus le sens à elle seule, et une confusion de couleurs devient esthétique plutôt que fonctionnelle.

Une remarque sur les valeurs par défaut des frameworks

Rien de tout cela ne signifie que Bootstrap ou Tailwind sont mal conçus. Tous deux vous donnent les moyens de remplacer ces valeurs, et tous deux documentent l’exigence d’accessibilité.

Mais ce sont les valeurs par défaut qui partent en production. Une valeur par défaut invisible pour 5% des hommes mérite d’être modifiée dans votre propre couche de thème plutôt que d’être héritée telle quelle. Cela coûte une ligne dans un fichier de configuration ; l’alternative, c’est une catégorie de bugs qu’aucun audit automatisé de votre pipeline ne fera jamais remonter.

Vérifiez votre propre palette

Les mesures de cet article proviennent de notre simulateur de daltonisme, qui confronte chaque paire d’une palette à huit types de vision simulés et signale celles qui se confondent. Il fonctionne entièrement dans votre navigateur : collez vos couleurs de marque et voyez quelles paires votre audit de contraste laissait passer sans rien dire.