Miniatures et daltonisme

De qui il s'agit, et pourquoi la miniature est le cas difficile

Le daltonisme rouge-vert est le plus courant : on le cite habituellement autour de 8 % des hommes et 0,5 % des femmes d'origine nord-européenne, sous deux formes — la deutéranopie, côté vert, et la protanopie, côté rouge. Ce sont les deux que j'ai simulées. Le reste est assez rare pour tenir dans une note, et il en a une, à la fin.

Une miniature est le cas difficile parce qu'il n'y a rien d'autre sur quoi se rattraper. Un graphique avec une légende de couleurs a des étiquettes ; un site a du texte. Une miniature a une seule image de 336 pixels de large, à côté d'un titre qui décrit la vidéo et non l'image — et si deux de ses zones cessent d'être distinguables, la maquette a simplement perdu une frontière, sans rien pour la remplacer.

Ce qui change, et ce qui ne change pas

C'est la partie à mesurer en premier, car elle décide de tout le reste. J'ai passé la simulation dichromate standard sur les 660 miniatures des packs de cet outil et comparé chaque image avec elle-même.

La luminosité globale d'une image bouge à peine : la variation médiane de la luminance relative moyenne est de 0,59 % en deutéranopie et de 1,11 % en protanopie. Ce qui s'effondre, c'est la différence entre teintes. Le rouge pur, rgb(255,0,0), devient rgb(147,147,0), un jaune terne. Un vert franc, rgb(0,200,0), devient rgb(171,171,30). Ces deux-là sont la même couleur, à la luminosité près. Le blanc reste exactement blanc.

La bonne façon d'y penser n'est donc pas que les couleurs se dégradent. C'est que l'axe de la teinte est supprimé et que l'axe de la luminosité reste intact. Toute séparation bâtie sur la teinte disparaît ; toute séparation bâtie sur la luminosité est intouchée.

Les couleurs saturées prises isolément peuvent, elles, changer de luminosité — ce même rouge pur passe de 0,213 à 0,271 de luminance relative en deutéranopie et descend à 0,104 en protanopie. C'est l'image dans son ensemble qui ne bouge pas, parce que l'essentiel d'une photographie n'est pas complètement saturé.

Comment je l'ai mesuré

La simulation est l'approximation linéaire de Viénot, Brettel et Mollon (1999) : convertir le sRGB en linéaire, puis en réponse des cônes LMS, projeter le cône manquant sur le plan que le dichromate perçoit, et revenir. C'est la méthode standard derrière la plupart des simulateurs de daltonisme, et sa faiblesse connue est la tritanopie — raison pour laquelle ce guide n'avance rien à son sujet.

Pour chaque miniature j'ai pris les deux familles de teintes dominantes — les deux secteurs de 30° sur douze à la plus grande part pondérée par la saturation, tous deux au-dessus de 10 % — et mesuré deux choses sur ce couple. Le rapport de contraste WCAG entre leurs couleurs moyennes, qui est une mesure de pure luminosité, et la distance entre ces deux couleurs en sRGB avant et après simulation.

586 des 660 miniatures ont deux teintes dominantes qui passent la barre des 10 %. C'est d'elles que parlent les chiffres qui suivent.

Combien de luminosité sépare deux couleurs dans une vraie miniature

La distribution est le résultat. Il s'agit du rapport de contraste entre les deux couleurs dominantes de la même miniature, sur les 586 qui ont un couple mesurable.

La médiane est de 1,57:1. Pour référence, les WCAG demandent 4,5:1 pour le texte courant et 3:1 pour les objets graphiques — des seuils écrits pour des interfaces, pas pour des photographies : ici ce sont un étalon et non une règle. Seules 2 % de ces miniatures atteignent le premier, 9 % le second.

Ce qui veut dire que quatre sur dix s'appuient sur la teinte seule

267 des 586 couples — 46 % d'entre eux, 40 % de toutes les miniatures mesurées — séparent leurs deux couleurs principales avec moins de 1,5:1 de contraste de luminosité. Ce qui tient ces deux zones à part n'est donc, pour l'essentiel, pas la luminosité : c'est la teinte, c'est-à-dire la partie qui n'arrive pas à un dichromate rouge-vert.

La simulation le confirme directement : sur l'ensemble des couples, la distance entre les deux couleurs chute d'une médiane de 9 %, et dans ce groupe à faible luminosité elle chute de 19 %. Les couples qui partaient avec le moins de contraste de luminosité sont précisément ceux qui perdent le plus de ce qu'ils avaient.

Et c'est la même décision de conception qui échoue, pour une autre raison, à la taille de livraison. Une frontière faite de teinte et non de luminosité est aussi celle qui se dissout quand le fichier est réencodé en 336 pixels de large, comme mesuré dans le guide sur les miniatures floues. Deux modes de défaillance, une cause, un remède.

L'avertissement rouge-sur-vert visait le mauvais problème

Le conseil d'accessibilité standard pour le daltonisme est de ne pas mettre du rouge à côté du vert. Mesurée sur de vraies miniatures, cette combinaison est rare : 13 sur 660, 2 %, ont une famille rouge et une famille verte comme deux teintes dominantes.

Quand cela arrive, c'est grave — ces couples perdent une médiane de 35 % de la distance entre eux, le pire de tous les groupes ici, et 10 des 13 ont en plus moins de 2:1 de contraste de luminosité. Le conseil n'est donc pas faux. Il est simplement étroit : il décrit 2 % des miniatures, alors que la version générale du même problème — deux teintes quelconques séparées par presque aucune luminosité — en décrit 40 %.

Et cela varie beaucoup selon la niche

Classées par la part des couples mesurables qui reposent sur la teinte seule. Le schéma suit l'allure même des niches, mesurée dans le guide sur le fait de se démarquer : les rangées claires et saturées ont le plus de séparation par teinte seule, parce qu'il reste moins d'amplitude de luminosité pour séparer quoi que ce soit.

Mode et Beauté et Politique sont à 65 % et 62 % ; Finance et Santé et Fitness à 25 % et 30 %. Si votre niche est dans la moitié haute de ce tableau, il y a de bonnes chances que la miniature dont vous allez copier l'allure soit l'une de celles qui s'aplatissent.

Le remède est un pour lequel vous avez déjà un chiffre

Séparez d'abord par la luminosité et traitez la teinte comme un bonus. C'est la même conclusion que celle du guide sur la couleur, atteinte par l'autre bout — l'interface est soit blanche soit presque noire — et c'est tout le remède ici aussi, car la luminosité est l'axe que la simulation laisse tranquille.

Le test bon marché est le niveau de gris. Désaturez complètement votre maquette et regardez si les parties se lisent encore comme des parties séparées : sujet contre fond, texte contre ce qu'il y a derrière, une moitié d'un cadre partagé contre l'autre. Si cela survit, cela survit à la dichromatie, car le niveau de gris est le test le plus strict : il retire toute l'information de teinte, alors qu'un dichromate en conserve un axe.

Ce qui veut dire aussi que l'inverse n'est pas une preuve. Ce qui échoue en niveau de gris peut rester partiellement visible pour un spectateur réellement deutéranope. Réussir le test en gris suffit ; l'échouer est un avertissement, pas un verdict. Le seuil n'est pas le nôtre : c'est le rapport de contraste défini par le critère de contraste minimal des WCAG, la norme à laquelle tout le reste du web est tenu.

Le texte est le cas avec le moins de marge

Le texte sur un fond coloré est là où cela se décide le plus vite, car le texte est fin : un titre séparé de son fond par la teinte seule est illisible pour un dichromate et simplement difficile pour tous les autres. Seuls 2 % des couples mesurés atteignent le 4,5:1 attendu du texte d'une interface.

La réponse pratique n'est pas un rapport de contraste mais un tracé : un contour ou une ombre dure dans une couleur dont la luminosité est loin à la fois du texte et du fond — ce que le guide sur la taille du texte mesure pour la réduction. Le même contour qui garde un titre lisible à 336 pixels le garde lisible sans la teinte.

Ce que ce guide ne couvre pas

La tritanopie, la forme bleu-jaune, n'est pas simulée ici. L'approximation de Viénot est notoirement peu fiable pour elle, et elle est assez rare — bien en dessous de 0,1 % — pour que deviner n'apporte rien.

L'achromatopsie totale, la monochromatie, est plus rare encore, et le test en niveau de gris ci-dessus est exactement ce cas : si votre maquette survit à la désaturation, elle survit aussi à la monochromatie.

Et tout ce guide parle de teinte. L'autre question d'accessibilité d'une miniature est la taille, qui n'est pas du tout une question de handicap : tout le monde reçoit votre maquette en 336 pixels de large, et les planchers pour cela sont dans les guides sur la taille du texte et sur les visages.

La vérification, en une minute

Deux passes sur la même image. Désaturez-la et voyez si les parties se séparent encore. Puis remettez la version en couleur dans un vrai fil, car une miniature qui se sépare en interne peut tout de même perdre son bord contre l'interface — autre mesure, autre guide.

Cette seconde passe est le rôle de l'outil d'aperçu : votre miniature parmi de vrais concurrents, aux tailles réellement rendues. La première est un curseur dans le logiciel où vous l'avez conçue, et c'est la vérification d'accessibilité la moins chère de ce métier.

Les questions que tout le monde se pose